वेबसाइट का बैकग्राउंड कैसे स्ट्रेच करें

विषयसूची:

वेबसाइट का बैकग्राउंड कैसे स्ट्रेच करें
वेबसाइट का बैकग्राउंड कैसे स्ट्रेच करें

वीडियो: वेबसाइट का बैकग्राउंड कैसे स्ट्रेच करें

वीडियो: वेबसाइट का बैकग्राउंड कैसे स्ट्रेच करें
वीडियो: HTML बैकग्राउंड इमेज को फ़िट स्क्रीन कैसे बनाएं 2024, नवंबर
Anonim

HTML मार्कअप भाषा एक वेब डिज़ाइनर को किसी भी छवि को पृष्ठभूमि छवि के रूप में उपयोग करने की अनुमति देती है। हालाँकि, भाषा में पृष्ठभूमि छवियों के लिए अंतर्निहित नियंत्रणों का अभाव है। कैस्केडिंग सीएसएस स्टाइलशीट का उपयोग करके अधिक बारीक ट्यूनिंग की जाती है।

वेबसाइट का बैकग्राउंड कैसे स्ट्रेच करें
वेबसाइट का बैकग्राउंड कैसे स्ट्रेच करें

अनुदेश

चरण 1

पृष्ठभूमि को ब्राउज़र की पूरी चौड़ाई तक फैलाने के लिए, आपको अपने CSS में z-index पैरामीटर का उपयोग करने की आवश्यकता है। यह आपको आपके द्वारा बनाए गए तत्वों का क्रम निर्धारित करने की अनुमति देता है। इस विशेषता का मान जितना अधिक होगा, पृष्ठ पर उतना ही अधिक ब्लॉक होगा।

चरण दो

एचटीएमएल और सीएसएस प्रारूप में नए दस्तावेज़ बनाएं (दायां माउस बटन - "नया" - "टेक्स्ट फ़ाइल") और किसी भी टेक्स्ट एडिटर का उपयोग करके उन्हें खोलें।

चरण 3

बैकग्राउंड इमेज को नीचे की लेयर पर रखें। यह स्क्रीन रेजोल्यूशन के आधार पर खिंचेगा। शीर्ष पर, एक अन्य तत्व स्थित होगा जिस पर पृष्ठ की सामग्री प्रदर्शित की जाएगी। ऐसा करने के लिए, दो ब्लॉक बनाएं। सीएसएस फ़ाइल में लिखें:.1 परत {z-index: 1; चौड़ाई: 100% ऊंचाई: 100% स्थिति: पूर्ण;}। 2 परत {स्थिति: पूर्ण; जेड-इंडेक्स: 2; } स्थिति: निरपेक्ष पैरामीटर आपको पूर्ण स्थिति निर्धारित करने की अनुमति देता है, अर्थात। परत अन्य तत्वों से स्वतंत्र रूप से स्थित होगी।

चरण 4

लिंक टैग का उपयोग करके HTML फ़ाइल में जेनरेट किया गया CSS कोड शामिल करें: पृष्ठ पृष्ठभूमि

चरण 5

एक नई परत बनाएं। टैग का उपयोग करना

उस पर एक चित्र लगाएं। उदाहरण के लिए: पृष्ठ सामग्री img के लिए, केवल चौड़ाई पैरामीटर निर्दिष्ट किया जाता है, क्योंकि यदि आप अतिरिक्त ऊंचाई निर्दिष्ट करते हैं, तो कुछ ब्राउज़रों में छवि विकृति दिखाई देगी।

चरण 6

अपने परिवर्तन सहेजें। अपने कोड का परीक्षण करने के लिए, अपनी ब्राउज़र विंडो में पृष्ठ को बड़ा करें। बैकग्राउंड इमेज को भी बड़ा किया जाना चाहिए।

सिफारिश की: