आज की लोकप्रिय वेबसाइटों को देखें और एक डिज़ाइन उपचार जो आपको निश्चित रूप से दिखाई देगा, वह है बड़ी, स्क्रीन पर फैली हुई पृष्ठभूमि की छवियां। इन छवियों को जोड़ने के साथ चुनौतियों में से एक सर्वोत्तम अभ्यास से आता है कि वेबसाइटों को विभिन्न स्क्रीन आकारों और उपकरणों का जवाब देना चाहिए - एक दृष्टिकोण जिसे जाना जाता है प्रतिक्रियात्मक वेब डिज़ाइन.
कई स्क्रीन के लिए एक छवि
चूंकि आपकी वेबसाइट का लेआउट बदलता है और विभिन्न स्क्रीन आकारों के साथ स्केल होता है, इसलिए इन पृष्ठभूमि छवियों को भी उनके आकार के अनुसार स्केल करना चाहिए। वास्तव में, ये "द्रव चित्र" उत्तरदायी वेबसाइटों (एक द्रव ग्रिड और मीडिया प्रश्नों के साथ) के प्रमुख टुकड़ों में से एक हैं। वे तीन टुकड़े शुरू से ही उत्तरदायी वेब डिज़ाइन का एक प्रमुख हिस्सा रहे हैं, लेकिन जबकि यह हमेशा उत्तरदायी जोड़ने के लिए काफी आसान रहा है किसी साइट पर इनलाइन छवियां (इनलाइन छवियां वे ग्राफ़िक्स हैं जिन्हें HTML मार्कअप के भाग के रूप में कोडित किया गया है), पृष्ठभूमि छवियों के साथ ऐसा ही करना (जो सीएसएस पृष्ठभूमि गुणों का उपयोग करके पृष्ठ में स्टाइल किया गया है) ने लंबे समय से कई वेब डिजाइनरों और फ्रंट एंड को एक महत्वपूर्ण चुनौती प्रदान की है डेवलपर्स। शुक्र है, सीएसएस में "पृष्ठभूमि-आकार" संपत्ति को जोड़ने से यह संभव हो गया है।
एक अलग लेख में, हमने कवर किया कि इसका उपयोग कैसे करें CSS3 संपत्ति पृष्ठभूमि-आकार एक विंडो में फिट करने के लिए छवियों को फैलाने के लिए, लेकिन इस संपत्ति के लिए तैनात करने का एक बेहतर, अधिक उपयोगी तरीका है। ऐसा करने के लिए, हम निम्नलिखित संपत्ति और मूल्य संयोजन का उपयोग करेंगे:
पृष्ठभूमि-आकार: कवर;
कवर कीवर्ड प्रॉपर्टी ब्राउज़र को विंडो में फिट होने के लिए इमेज को स्केल करने के लिए कहती है, भले ही वह विंडो कितनी भी बड़ी या छोटी हो। छवि को पूरी स्क्रीन को कवर करने के लिए बढ़ाया जाता है, लेकिन मूल अनुपात और पहलू अनुपात को बरकरार रखा जाता है, जिससे छवि को विकृत होने से रोका जा सके। छवि को खिड़की में जितना संभव हो उतना बड़ा रखा जाता है ताकि खिड़की की पूरी सतह को कवर किया जा सके। इसका मतलब है कि आपके पृष्ठ में कोई रिक्त स्थान या छवि पर कोई विकृति नहीं होगी, बल्कि यह भी होगा इसका मतलब है कि स्क्रीन के पहलू अनुपात और छवि के आधार पर कुछ छवि को ट्रिम किया जा सकता है सवाल। उदाहरण के लिए, एक छवि के किनारों (या तो ऊपर, नीचे, बाएं या दाएं) को छवियों पर काटा जा सकता है, यह इस बात पर निर्भर करता है कि आप पृष्ठभूमि-स्थिति संपत्ति के लिए किन मूल्यों का उपयोग करते हैं। यदि आप पृष्ठभूमि को "ऊपरी बाएँ" की ओर उन्मुख करते हैं, तो छवि पर कोई भी अतिरिक्त नीचे और दाईं ओर से आ जाएगा। यदि आप पृष्ठभूमि छवि को केंद्र में रखते हैं, तो अतिरिक्त सभी तरफ से निकल जाएगा, लेकिन चूंकि वह अतिरिक्त फैल गया है, इसलिए किसी एक तरफ प्रभाव कम होगा।
'पृष्ठभूमि-आकार: कवर' का उपयोग कैसे करें
अपनी पृष्ठभूमि छवि बनाते समय, एक ऐसी छवि बनाना एक अच्छा विचार है जो काफी बड़ी हो। जबकि ब्राउज़र दृश्य गुणवत्ता पर ध्यान देने योग्य प्रभाव के बिना एक छवि को छोटा बना सकते हैं, जब कोई ब्राउज़र किसी को बढ़ाता है छवि अपने मूल आयामों से बड़े आकार में, दृश्य गुणवत्ता ख़राब हो जाएगी, धुंधली हो जाएगी और पिक्सेलयुक्त इसका नकारात्मक पक्ष यह है कि जब आप सभी स्क्रीन पर विशाल चित्र वितरित कर रहे होते हैं तो आपका पृष्ठ एक प्रदर्शन हिट लेता है। जब आप ऐसा करते हैं, तो सुनिश्चित करें कि इसे ठीक से करें उन छवियों को डाउनलोड गति और वेब वितरण के लिए तैयार करें. अंत में, आपको एक बड़े पर्याप्त छवि आकार और गुणवत्ता और डाउनलोड गति के लिए एक उचित फ़ाइल आकार के बीच सुखद माध्यम खोजने की आवश्यकता है।
स्केलिंग पृष्ठभूमि छवियों का उपयोग करने के सामान्य तरीकों में से एक यह है कि जब आप चाहते हैं कि वह छवि किसी पृष्ठ की पूरी पृष्ठभूमि पर ले जाए, चाहे वह पृष्ठ चौड़ा हो और डेस्कटॉप कंप्यूटर पर देखा जा रहा हो या बहुत छोटा हो और हैंडहेल्ड, मोबाइल पर भेजा जा रहा हो उपकरण।
अपनी छवि को अपने वेब होस्ट पर अपलोड करें और इसे अपने सीएसएस में पृष्ठभूमि छवि के रूप में जोड़ें:
पृष्ठभूमि-छवि: url (आतिशबाजी-ओवर-wdw.jpg);
बैकग्राउंड-रिपीट: नो-रिपीट;
पृष्ठभूमि-स्थिति: केंद्र केंद्र;
पृष्ठभूमि-लगाव: निश्चित;
पहले ब्राउजर प्रीफिक्स्ड सीएसएस जोड़ें:
-वेबकिट-पृष्ठभूमि-आकार: कवर;
-मोज़-पृष्ठभूमि-आकार: कवर;
-ओ-पृष्ठभूमि-आकार: कवर;
फिर सीएसएस संपत्ति जोड़ें:
पृष्ठभूमि-आकार: कवर;
विभिन्न उपकरणों के अनुरूप विभिन्न छवियों का उपयोग करना
जबकि डेस्कटॉप या लैपटॉप अनुभव के लिए उत्तरदायी डिज़ाइन महत्वपूर्ण है, विभिन्न प्रकार के डिवाइस जो वेब तक पहुंच बना सकता है, काफी बढ़ गया है, और स्क्रीन आकार की एक बड़ी विविधता के साथ आता है उस।
जैसा कि पहले उल्लेख किया गया है, स्मार्टफोन पर एक बहुत बड़ी प्रतिक्रियाशील पृष्ठभूमि छवि लोड करना, उदाहरण के लिए, एक कुशल या बैंडविड्थ-सचेत डिज़ाइन नहीं है।
जानें कि आप कैसे उपयोग कर सकते हैं मीडिया के प्रश्नों उन छवियों को प्रस्तुत करने के लिए जो उन उपकरणों के लिए उपयुक्त होंगी जिन पर उन्हें प्रदर्शित किया जाएगा, और मोबाइल उपकरणों के साथ आपकी वेबसाइट की संगतता में और सुधार होगा।