सीएसएस का उपयोग करके पृष्ठभूमि छवि को ब्राउज़र विंडो की पूरी चौड़ाई तक फैलाने की क्षमता केवल इसके नवीनतम विनिर्देश - CSS3 के रिलीज के साथ दिखाई दी। दुर्भाग्य से, अब तक बड़ी संख्या में वेब सर्फर ऐसे शुरुआती ब्राउज़र का उपयोग कर रहे हैं जो CSS3 के विनिर्देश को नहीं समझते हैं। इसलिए, आपको एक विकल्प बनाना होगा - या तो कम सुविधाजनक, लेकिन क्रॉस-ब्राउज़र समाधान, या उच्च तकनीक का उपयोग करें, लेकिन सीमित दर्शकों के लिए। आइए दोनों विकल्पों पर विचार करें।
ज़रूरी
HTML और CSS का बुनियादी ज्ञान
निर्देश
चरण 1
पहला विकल्प CSS भाषा के पुराने विनिर्देशों पर आधारित है। आपको एक HTML कोड संरचना बनाने की आवश्यकता है जिसमें दो अतिव्यापी परतें हों, एक दूसरे के ऊपर। परतों (div) को पुराने कैस्केडिंग शैली विवरण भाषा विनिर्देश में स्क्रीन की चौड़ाई तक बढ़ाया जा सकता है। परतों के निचले भाग में आपको पृष्ठभूमि छवि रखने की आवश्यकता होती है, और शीर्ष पर पृष्ठ की सभी सामग्री को रखा जाएगा। दस्तावेज़ के मुख्य भाग में ऐसी संरचना इस तरह दिख सकती है:
यह पृष्ठ की सामग्री होगी
और इस संरचना के लिए शैलियों का विवरण शीर्षक भाग में रखा जाना चाहिए। उदाहरण के लिए, यह:
एचटीएमएल, शरीर {
मार्जिन: 0px;
ऊंचाई: 100%;
}
#पृष्ठभूमि {
स्थिति: निरपेक्ष;
चौड़ाई: 100%;
ऊंचाई: 100%;
}
#तन {
स्थिति: निरपेक्ष;
चौड़ाई: 100%;
ऊंचाई: 100%;
जेड-इंडेक्स: 2;
}
यहां आईडी बैकग्राउंड वाली परतें (यह आपकी पृष्ठभूमि की छवि है) और बॉडी (यह पृष्ठ सामग्री के लिए परत है) को पूर्ण स्थिति और 100% चौड़ाई और ऊंचाई पर सेट किया गया है। इसके अलावा, सामग्री परत को एक सीरियल नंबर z-index = 2 सौंपा गया है। यह परतों की "गहराई" निर्धारित करता है - यह जितना बड़ा होगा, यह परत "नीचे" से उतनी ही दूर स्थित होगी। हमारे मामले में, यह बैकग्राउंड लेयर के ऊपर होगा, जो डिफ़ॉल्ट z-index का उपयोग करता है।
चरण 2
पूरा कोड इस तरह दिख सकता है:
एचटीएमएल, शरीर {
मार्जिन: 0px;
ऊंचाई: 100%;
}
#पृष्ठभूमि {
स्थिति: निरपेक्ष;
चौड़ाई: 100%;
ऊंचाई: 100%;
}
#तन {
स्थिति: निरपेक्ष;
चौड़ाई: 100%;
ऊंचाई: 100%;
जेड-इंडेक्स: 2;
}
यह पृष्ठ की सामग्री होगी
पृष्ठभूमि छवि फ़ाइल नाम fon.
चरण 3
दूसरा विकल्प CSS3 में पेश की गई पृष्ठभूमि-आकार की संपत्ति का उपयोग करेगा। उसी समय, शैली परिभाषाओं में समान गुण जोड़ें जो पहले ब्राउज़र मोज़िला फ़ायरफ़ॉक्स, Google क्रोम और ओपेरा द्वारा उपयोग किए गए थे। इस संस्करण में शैली विवरण ब्लॉक इस तरह दिख सकता है:
एचटीएमएल {
बैकग्राउंड: url (fon.png) नो-रिपीट सेंटर सेंटर फिक्स्ड;
-वेबकिट-पृष्ठभूमि-आकार: कवर;
-मोज़-पृष्ठभूमि-आकार: कवर;
-ओ-पृष्ठभूमि-आकार: कवर;
पृष्ठभूमि-आकार: कवर;
}
और यहाँ पृष्ठभूमि छवि फ़ाइल नाम fon.png"
