आजकल, रिस्पॉन्सिव बैकग्राउंड इमेज वाली वेबसाइटें मांग में हैं। उत्तरदायी वेबसाइटें उपयोगकर्ताओं को मोबाइल, टैबलेट या डेस्कटॉप सहित लगभग सभी उपकरणों पर आदर्श उपयोगकर्ता अनुभव प्रदान करती हैं। प्रतिक्रियाशील छवियां वेबसाइट की पृष्ठभूमि, स्क्रीन आकार और आयामों को अनुकूलित कर सकती हैं। प्रतिक्रियाशील छवियां यह सुनिश्चित करती हैं कि गुणवत्ता और अनुपात बनाए रखा जाए। इसके अतिरिक्त, प्रतिक्रियाशील पृष्ठभूमि छवियों वाली वेबसाइट जल्दी से लोड होती है।
यह मार्गदर्शिका पृष्ठभूमि छवियों को स्क्रीन आयामों के अनुसार अनुकूलित करने के निर्देश प्रदान करेगी।
पृष्ठभूमि छवियों को स्क्रीन आयामों के अनुसार कैसे अनुकूलित करें?
छवि नीचे दिए गए चरणबद्ध निर्देशों का पालन करके स्क्रीन आयामों के अनुकूल हो सकती है।
चरण 1: एक HTML संरचना बनाएं
सबसे पहले, एक HTML संरचना बनाएं और इसका उपयोग करके बाहरी स्टाइल शीट जोड़ें <लिंक> HTML के मुख्य भाग में टैग करें। उस उद्देश्य के लिए, बस ' <लिंक rel = 'स्टाइलशीट' href = 'style.css'> हेड टैग के अंदर। “ रिले टैग HTML दस्तावेज़ के साथ फ़ाइल के संबंध को निर्दिष्ट करता है। “ href टैग सीएसएस फ़ाइल पता निर्दिष्ट करता है:
< एचटीएमएल >
< सिर >
< जोड़ना रिले = 'शैली पत्रक' href = 'style.css' >
< शीर्षक > उत्तरदायी पृष्ठभूमि छवि शीर्षक >
सिर >
< शरीर >
-- अन्य सामग्री जोड़ने का क्षेत्र-- >
शरीर >
एचटीएमएल >
चरण 2: सीएसएस लागू करें
अब, CSS को “पर लागू करें” शरीर ' अनुभाग। सबसे पहले, पृष्ठभूमि छवि निर्दिष्ट करें. उस उद्देश्य के लिए, 'का उपयोग करें पृष्ठभूमि छवि ' और निर्दिष्ट करें ' यूआरएल() 'मूल्य जिसमें छवि फ़ाइल पता शामिल है।
उसके बाद, ' का उपयोग करें पृष्ठभूमि छवि ' छवि आकार निर्दिष्ट करने के लिए, ' पृष्ठभूमि दोहराएँ छवि की पुनरावृत्ति सेट करने के लिए संपत्ति, और पृष्ठभूमि संलग्न यह सेट करने के लिए कि छवि शेष पृष्ठ के साथ स्क्रॉल होती है या नहीं। अंत में, 'सेट करें अंतर ' और ' गद्दी ' को ' 0 ”:
शरीर {पृष्ठभूमि-छवि: यूआरएल ( 'test-image.jpg' ) ;
पृष्ठभूमि-आकार: 100 % 100 % ;
/* छवि को स्केल करें 100 % चौड़ाई और 100 % ऊंचाई */
बैकग्राउंड-रिपीट: नो-रिपीट;
पृष्ठभूमि-अनुलग्नक: निश्चित;
अंतर: 0 ;
गद्दी: 0 ;
/* वैकल्पिक: निश्चित पृष्ठभूमि */
}
उत्पादन
ब्राउज़र विंडो को अनुबंधित करने से पहले यह आउटपुट है:
ब्राउज़र के संकुचन के बाद:
उपरोक्त आउटपुट पुष्टि करता है कि छवि ने पृष्ठभूमि को स्क्रीन आयामों के अनुसार अनुकूलित कर लिया है।
निष्कर्ष
पृष्ठभूमि छवियों को स्क्रीन आयामों के अनुसार अनुकूलित करने के लिए, सबसे पहले, ' शामिल करें व्यूपोर्ट आयाम और स्केलिंग को नियंत्रित करने के लिए मुख्य अनुभाग में। फिर, एक HTML संरचना बनाएं और CSS लागू करें। सीएसएस में, 'सेट करें बैकग्राउड-आकार 'संपत्ति का मूल्य' ढकना 'किसी छवि की ऊंचाई और चौड़ाई को मापने के लिए मान। इस लेख में पृष्ठभूमि छवियों को स्क्रीन आयामों के अनुरूप ढालने के लिए एक संपूर्ण मार्गदर्शिका प्रस्तुत की गई है।