पृष्ठभूमि ग्राफिक्स के साथ अपनी वेबसाइट दृश्य रुचि दें
छवियां आकर्षक वेबसाइट डिज़ाइन का एक महत्वपूर्ण हिस्सा हैं। इसमें पृष्ठभूमि छवियों का उपयोग शामिल है। ये छवियां और ग्राफिक्स हैं जिनका उपयोग पृष्ठ के उन क्षेत्रों के पीछे किया जाता है, जो सामग्री पृष्ठों के हिस्से के रूप में प्रस्तुत छवियों के विपरीत हैं। ये पृष्ठभूमि छवियां किसी पृष्ठ पर दृश्य रुचि जोड़ सकती हैं और आपको उस पृष्ठ पर दृश्य डिज़ाइन प्राप्त करने में सहायता कर सकती हैं, जिसे आप किसी पृष्ठ पर खोज रहे हैं।
यदि आप पृष्ठभूमि छवियों के साथ काम करना शुरू करते हैं, तो निस्संदेह आप उस परिदृश्य में भाग लेंगे जहां आप पृष्ठ को फिट करने के लिए एक छवि को खींचना चाहते हैं।
यह विशेष रूप से उत्तरदायी वेबसाइटों के लिए सच है जो उपकरणों और स्क्रीन आकारों की विस्तृत श्रृंखला में वितरित किए जा रहे हैं ।
पृष्ठभूमि छवि को फैलाने की यह इच्छा वेब डिजाइनरों के लिए एक बहुत ही आम इच्छा है क्योंकि प्रत्येक छवि किसी वेबसाइट के स्थान पर फिट नहीं होती है। एक निश्चित आकार निर्धारित करने के बजाय, छवि को खींचने से यह पृष्ठ को फिट करने में फ्लेक्स करने की अनुमति देता है इससे कोई फर्क नहीं पड़ता कि ब्राउजर विंडो कितनी व्यापक या संकीर्ण है।
किसी पृष्ठ की पृष्ठभूमि फिट करने के लिए एक छवि को खींचने का सबसे अच्छा तरीका पृष्ठभूमि आकार के लिए CSS3 प्रॉपर्टी का उपयोग करना है। यहां एक उदाहरण दिया गया है जो किसी पृष्ठ के शरीर के लिए पृष्ठभूमि छवि का उपयोग करता है और जो आकार को 100% तक सेट करता है ताकि वह हमेशा स्क्रीन पर फिट हो सके।
तन {
पृष्ठभूमि: url (bgimage.jpg) दोहराना नहीं;
पृष्ठभूमि आकार: 100%;
}
Caniuse.com के मुताबिक, यह संपत्ति IE 9+, फ़ायरफ़ॉक्स 4+, ओपेरा 10.5+, सफारी 5+, क्रोम 10.5+, और सभी प्रमुख मोबाइल ब्राउज़र पर काम करती है। यह आपको आज उपलब्ध सभी आधुनिक ब्राउज़रों के लिए कवर करता है, जिसका अर्थ है कि आपको इस संपत्ति का डर के बिना उपयोग करना चाहिए कि यह किसी की स्क्रीन पर काम नहीं करेगा।
पुराने ब्राउज़र में एक खिंचाव पृष्ठभूमि लेना
यह बहुत ही असंभव है कि आपको IE9 से पुराने किसी भी ब्राउज़र का समर्थन करने की आवश्यकता होगी, लेकिन मान लें कि आप चिंतित हैं कि IE8 इस संपत्ति का समर्थन नहीं करता है। उस उदाहरण में, आप एक विस्तृत पृष्ठभूमि नकली कर सकते हैं। और आप फ़ायरफ़ॉक्स 3.6 (-मोज़-पृष्ठभूमि-आकार) और ओपेरा 10.0 (-o-background-size) के लिए ब्राउज़र उपसर्ग का उपयोग कर सकते हैं।
एक विस्तृत पृष्ठभूमि छवि नकली करने का सबसे आसान तरीका पूरे पृष्ठ में इसे फैला देना है। फिर आप अतिरिक्त जगह के साथ समाप्त नहीं होते हैं या चिंता करते हैं कि आपका टेक्स्ट विस्तारित क्षेत्र में फिट बैठता है। यहां यह कैसे करें:
आईडी = "बीजी" />
- सबसे पहले, सुनिश्चित करें कि सभी ब्राउज़रों में एचटीएमएल बॉडी तत्वों पर 100% ऊंचाई, 0 मार्जिन और 0 पैडिंग है। अपने एचटीएमएल दस्तावेज़ के शीर्ष में निम्नलिखित रखें:
- उस छवि को जोड़ें जिसे आप वेब पेज के पहले तत्व के रूप में पृष्ठभूमि बनाना चाहते हैं, और इसे "बीजी" की आईडी दें:
- पृष्ठभूमि छवि को स्थिति दें ताकि यह ऊपर और बाएं पर तय हो और 100% चौड़ी और ऊंचाई में 100% हो। इसे अपनी स्टाइल शीट में जोड़ें:
आईएमजी # बीजी {
स्थिति: तय;
शीर्ष: 0;
बाएं: 0;
चौड़ाई: 100%;
ऊंचाई: 100%;
} - "सामग्री" की एक आईडी के साथ एक डीआईवी तत्व के अंदर पृष्ठ पर अपनी सारी सामग्री जोड़ें। छवि के नीचे DIV जोड़ें:
नोट: अब अपने पेज को देखना दिलचस्प है। छवि को फैलाया जाना चाहिए, लेकिन आपकी सामग्री पूरी तरह गायब है। क्यूं कर? चूंकि पृष्ठभूमि छवि ऊंचाई में 100% है, और सामग्री विभाजन दस्तावेज़ के प्रवाह में छवि के बाद है - अधिकांश ब्राउज़र इसे प्रदर्शित नहीं करेंगे।यहां आपकी सभी सामग्री - हेडर, पैराग्राफ इत्यादि सहित।
- अपनी सामग्री को स्थिति दें ताकि यह सापेक्ष हो और इसमें 1 का जेड-इंडेक्स हो। यह इसे मानक-अनुरूप ब्राउज़र में पृष्ठभूमि छवि से ऊपर लाएगा। इसे अपनी स्टाइल शीट में जोड़ें:
#सामग्री {
स्थिति: सापेक्ष;
जेड-इंडेक्स: 1;
}
- लेकिन आप नहीं कर रहे हैं। इंटरनेट एक्सप्लोरर 6 मानक अनुरूप नहीं है और अभी भी कुछ समस्याएं हैं। प्रत्येक ब्राउज़र से सीएसएस को छिपाने के कई तरीके हैं लेकिन आईई 6, लेकिन सबसे आसान (और अन्य समस्याओं का कारण होने की संभावना) सशर्त टिप्पणियों का उपयोग करना है। अपने दस्तावेज़ के शीर्ष में अपनी स्टाइलशीट के बाद निम्नलिखित रखें:
- हाइलाइट की गई टिप्पणी के अंदर, आईई 6 को अच्छा खेलने के लिए कुछ शैलियों के साथ एक और स्टाइल शीट जोड़ें:
- आईई 7 और आईई 8 में भी परीक्षण करना सुनिश्चित करें। आपको उनकी सहायता के लिए टिप्पणियों को समायोजित करने की आवश्यकता हो सकती है। हालांकि, जब मैंने इसका परीक्षण किया तो यह काम करता था।
ठीक है - यह स्वीकार्य रूप से ओवर ओवरिल है। बहुत कम साइटों को आईई 7 या 8 का समर्थन करने की आवश्यकता है, बहुत कम आईई 6!
इस प्रकार, यह दृष्टिकोण पुरातन है और आपके लिए अनावश्यक है। मैं इसे जिज्ञासा के एक मॉडल के रूप में यहां छोड़ देता हूं क्योंकि हमारे सभी ब्राउज़रों ने इतनी अच्छी तरह से खेला है इससे पहले कि कितनी मुश्किल चीजें थीं!
एक छोटी सी जगह पर एक खिंचाव पृष्ठभूमि छवि लेना
आप नकली एक खिंचाव वाली पृष्ठभूमि छवि को एक डीआईवी या अपने वेब पेज पर किसी अन्य तत्व पर एक समान तकनीक का उपयोग कर सकते हैं। यह थोड़ा सा ट्रिकियर है क्योंकि आपको या तो पूर्ण स्थिति का उपयोग करना है या अपने पृष्ठ के अन्य हिस्सों के लिए अजीब अंतरण समस्याएं हैं।
- उस छवि को उस पृष्ठ पर रखें जिसे मैं पृष्ठभूमि के रूप में उपयोग करना चाहता हूं।
- स्टाइल शीट में, छवि के लिए चौड़ाई और ऊंचाई सेट करें। नोट, आप चौड़ाई या ऊंचाई के लिए प्रतिशत का उपयोग कर सकते हैं, लेकिन मुझे ऊंचाई के लिए लंबाई मानों के साथ समायोजित करना आसान लगता है।
आईएमजी # बीजी {
चौड़ाई: 20em;
ऊंचाई: 30em;
} - जैसा कि हमने उपरोक्त किया है, आईडी "सामग्री" के साथ अपनी सामग्री को div में रखें:
आपकी सारी सामग्री यहाँ
- पृष्ठभूमि छवि के रूप में सामग्री div को समान चौड़ाई और ऊंचाई के रूप में स्टाइल करें:
div # सामग्री {
चौड़ाई: 20em;
ऊंचाई: 30em;
} - फिर सामग्री को छवि के समान ऊंचाई तक रखें। तो अगर आपकी छवि 30 मीटर है तो आपके पास शीर्ष की शैली होगी: -30em; सामग्री पर 1 का जेड-इंडेक्स डालना न भूलें।
#सामग्री {
स्थिति: सापेक्ष;
शीर्ष: -30em;
जेड-इंडेक्स: 1;
चौड़ाई: 20em;
ऊंचाई: 30em;
} - फिर आईई 6 उपयोगकर्ताओं के लिए -1 के जेड-इंडेक्स में जोड़ें, जैसा आपने ऊपर किया था:
फिर, व्यापक ब्राउज़र समर्थन का आनंद ले रहे पृष्ठभूमि आकार के साथ यह अब भी अनावश्यक है और एक पूर्व युग के उत्पाद के रूप में प्रस्तुत किया गया है। यदि आप इस दृष्टिकोण का उपयोग करना चाहते हैं, तो बस इसे जितना संभव हो उतने ब्राउज़रों में जांचना सुनिश्चित करें।
और यदि आपकी सामग्री आकार बदलती है, तो आपको अपने कंटेनर और पृष्ठभूमि छवि का आकार बदलना होगा, अन्यथा, आप अजीब परिणामों के साथ समाप्त हो जाएंगे।