सीएसएस पृष्ठभूमि छवि:चरण-दर-चरण मार्गदर्शिका

सीएसएस पृष्ठभूमि छवि संपत्ति एक वेबसाइट की पृष्ठभूमि को एक छवि में बदल देती है। पृष्ठभूमि छवि का उपयोग करके एक पृष्ठभूमि छवि सेट की जाती है:url(url_of_image) गुण। आप एक से अधिक पृष्ठभूमि छवियां निर्दिष्ट कर सकते हैं जो पृष्ठभूमि-छवि गुण का उपयोग करके ओवरलैप करती हैं।

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

यह ट्यूटोरियल और उदाहरण आपको इस सीएसएस संपत्ति से परिचित कराएंगे। इस लेख के अंत तक, आप पृष्ठभूमि छवियों को अनुकूलित करने के विशेषज्ञ होंगे।

सीएसएस पृष्ठभूमि छवि

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

जब आप एक वेब पेज डिजाइन कर रहे हों, तो आपको यह निर्धारित करना होगा कि अंतिम उत्पाद में पृष्ठभूमि छवि होगी या नहीं।

उदाहरण के लिए, यदि आप 'हमारे बारे में' पृष्ठ डिज़ाइन कर रहे हैं, तो आप पृष्ठभूमि में टीम के सदस्यों की एक समूह तस्वीर चाहते हैं। यदि आप एक कैफे के लिए एक वेबसाइट डिजाइन कर रहे हैं, तो एक कप कॉफी की छवि प्रदर्शित करने वाले पृष्ठ पर एक हेडर जोड़ने पर विचार करें।

बैकग्राउंड-इमेज प्रॉपर्टी HTML एलिमेंट में बैकग्राउंड के रूप में इमेज जोड़ती है। आप निम्न सिंटैक्स का उपयोग करके किसी तत्व में पृष्ठभूमि छवि जोड़ सकते हैं:

background-image: url(imageUrl);

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

imageUrl उस छवि के स्थान को संदर्भित करता है जिसे आप प्रदर्शित करना चाहते हैं।

सीएसएस पृष्ठभूमि छवि उदाहरण

हम 'द कॉफ़ी ग्राइंड' नामक एक स्थानीय कैफे के लिए एक साइट डिजाइन करने वाली एक परियोजना पर काम कर रहे हैं। कॉफी शॉप ने हमें एक शीर्ष पृष्ठ बैनर बनाने के लिए कहा है, जिसमें एक कप कॉफी की स्टॉक छवि प्रदर्शित होती है। इस बैनर के बीच में 'वेलकम टू द कॉफ़ी ग्राइंड' होना है।

हम निम्नलिखित कोड का उपयोग करके बैनर बना सकते हैं:

index.html

<div class="image">
	<p class="header">Welcome to The Coffee Grind</p>
</div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	height: 250px;
}

.header {
	padding-top: 50px;
	color: white;
	font-size: 20px;
	text-align: center;
}

हमारा कोड लौटाता है:

सीएसएस पृष्ठभूमि छवि:चरण-दर-चरण मार्गदर्शिका

आइए हम अपना कोड तोड़ दें। हमारी HTML फ़ाइल में, हमने "हेडर" वर्ग के साथ एक

टैग को परिभाषित किया है। यह टैग वेब पेज पर "वेलकम टू द कॉफ़ी ग्राइंड" टेक्स्ट दिखाता है।

हमारी सीएसएस फ़ाइल में, हमने "छवि" नामक एक HTML वर्ग के लिए एक नियम परिभाषित किया है। यह हमारे बैनर के लिए एक पृष्ठभूमि छवि सेट करता है और हमारे बैनर की ऊंचाई 250px पर सेट करता है। फिर हमने "हेडर" नामक एक वर्ग को परिभाषित किया, जिसका उपयोग हमारे हेडर में टेक्स्ट को स्टाइल करने के लिए किया जाता है।

"हेडर" वर्ग हमारे हेडर टेक्स्ट के शीर्ष पर 50px पैडिंग लागू करता है। "हेडर" वर्ग टेक्स्ट के रंग को सफेद पर सेट करता है। हमारी शैलियाँ हेडर के फ़ॉन्ट आकार को 20px पर सेट करती हैं, और हेडर को तत्व के केंद्र में संरेखित करती हैं।

सीएसएस एकाधिक पृष्ठभूमि छवियां

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

background-image: url(image1), url(image2);

निर्दिष्ट पहली छवि तत्व के शीर्ष पर दिखाई देगी, और बाद के तत्व एक दूसरे के पीछे दिखाई देंगे। मान लीजिए हम अपने बैनर के सामने एक कॉफी कप का आइकन जोड़ना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

index.html

<div class="image">
	<p class="header">Welcome to The Coffee Grind</p>
</div>

styles.css

.image {
	background-image: url(https://img.icons8.com/wired/64/000000/coffee.png), url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	height: 250px;
}

.header {
	padding-top: 50px;
	color: white;
	font-size: 20px;
	text-align: center;
}

हमारा कोड लौटाता है:

जैसा कि आप देख सकते हैं, हमारे कॉफी कप आइकन को हमारी पृष्ठभूमि छवि के सामने जोड़ा गया है। हमारा आइकन केवल सामने दिखाई देता है क्योंकि हमने इसे पृष्ठभूमि छवियों की हमारी सूची में पहली पृष्ठभूमि छवि के रूप में निर्दिष्ट किया है।

पृष्ठभूमि छवि का आकार

जब आप बैकग्राउंड-इमेज प्रॉपर्टी के साथ काम कर रहे होते हैं, तो आप बैकग्राउंड इमेज के आकार को उसके कंटेनर में कस्टमाइज़ करना चाह सकते हैं। इस उद्देश्य के लिए पृष्ठभूमि-आकार की संपत्ति का उपयोग किया जाता है।

पृष्ठभूमि-आकार की संपत्ति चार संभावित मान स्वीकार करती है। ये हैं:

स्वतः:यह मान वेब ब्राउज़र को पृष्ठभूमि छवि (डिफ़ॉल्ट) के लिए सर्वोत्तम आकार तय करने के लिए कहता है।
Contain:यह मान ब्राउज़र को निर्देश देता है कि वास्तविक छवि का आकार दिखाई देना चाहिए, भले ही वह कंटेनर को न भर दे। यदि कोई चित्र कंटेनर को भरने के लिए बहुत छोटा है, तो वह अपने पूर्ण आकार में दिखाई देगा। उन क्षेत्रों में सफेद स्थान छोड़ा जाएगा जिन्हें चित्र नहीं भर सकता।
कवर:यह मान ब्राउज़र को चित्र को पूरे कंटेनर के आकार का बनाने का निर्देश देता है।
Length:यह बैकग्राउंड इमेज की चौड़ाई और ऊंचाई है। निर्दिष्ट पहला मान छवि की चौड़ाई निर्धारित करता है, और निर्दिष्ट दूसरा मान ऊंचाई निर्धारित करता है।

पृष्ठभूमि का आकार बदलना

मान लीजिए कि हम चाहते थे कि हमारी कॉफी बैनर छवि पहले से हमारे तत्व में समाहित हो। इसका मतलब है कि पूरी छवि दिखाई देनी चाहिए, भले ही वह कंटेनर न भरे। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	background-size: contain;
	height: 250px;
}

हमारा कोड लौटाता है:

जैसा कि आप देख सकते हैं, हमारे पहले उदाहरण के विपरीत, हमारी पूरी पृष्ठभूमि छवि दिखाई दे रही है। ऐसा इसलिए है क्योंकि हमने अपने कोड में बैकग्राउंड-साइज़ प्रॉपर्टी को निर्दिष्ट किया है और इसका मान contain . पर सेट किया है . वैकल्पिक रूप से, हम कवर . का उपयोग कर सकते थे मूल्य अगर हम चाहते हैं कि हमारी छवि पूरे कंटेनर के आकार को कवर करे।

आप छवि के लिए पिक्सेल आकार भी निर्दिष्ट कर सकते हैं। मान लें कि हम चाहते हैं कि हमारी स्टाइल इमेज 200px लंबी और 200px चौड़ी हो। हम निम्नलिखित कोड का उपयोग करके ऐसा कर सकते हैं:

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	background-size: contain;
	height: 200px;
	width: 200px;
}

हमारा कोड लौटाता है:

इस उदाहरण में, हमारी छवि 200px चौड़ी और 200px लंबी है।

स्थिति पृष्ठभूमि छवि

बैकग्राउंड-ओरिजिनल प्रॉपर्टी आपको वेब एलिमेंट की सामग्री, बॉर्डर या पैडिंग के अनुसार बैकग्राउंड इमेज को पोजिशन करने देती है।

बैकग्राउंड-ओरिजिनल प्रॉपर्टी तीन संभावित मान स्वीकार करती है:

बॉर्डर-बॉक्स:बॉर्डर बॉक्स के सापेक्ष छवि को प्रदर्शित करने के लिए स्थित करता है।
सामग्री-बॉक्स:छवि को सामग्री बॉक्स के सापेक्ष प्रदर्शित करने के लिए स्थान देता है।
पैडिंग-बॉक्स:छवि को पैडिंग बॉक्स (डिफ़ॉल्ट) के सापेक्ष प्रदर्शित करता है।

बॉर्डर, सामग्री और पैडिंग के बारे में अधिक जानने के लिए, CSS बॉक्स मॉडल के लिए हमारी मार्गदर्शिका पढ़ें।

मान लीजिए कि हम अपनी छवि की स्थिति को समायोजित करना चाहते हैं। उदाहरण के लिए, आप निम्न कोड का उपयोग करके सामग्री बॉक्स के सापेक्ष एक पृष्ठभूमि छवि बना सकते हैं:

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	border: 10px solid black;
	padding: 25px;
	background-origin: content-box;
	background-repeat: no-repeat;
	height: 250px;
}

हमारा कोड लौटाता है:

इस उदाहरण में, हमारी पृष्ठभूमि छवि सामग्री बॉक्स के सापेक्ष दिखाई देती है। जैसा कि आप देख सकते हैं, हमारी छवि सीमा और पृष्ठभूमि छवि के बीच एक सफेद अंतर है। यह सापेक्ष पृष्ठभूमि स्थिति को दर्शाता है जिसमें हमारी छवि दिखाई देती है।

हमने इसे बैकग्राउंड-ओरिजिनल:कंटेंट-बॉक्स प्रॉपर्टी को निर्दिष्ट करके हासिल किया है। हमने बैकग्राउंड-रिपीट:नो-रिपीट प्रॉपर्टी को निर्दिष्ट किया है। यह गुण हमारी छवि को उसके सामग्री बॉक्स तक सीमित करता है। बैकग्राउंड-ओरिजिनल प्रॉपर्टी द्वारा बनाए गए रिक्त स्थान में छवि दिखाई नहीं देगी।

निष्कर्ष

हम किसी तत्व की पृष्ठभूमि को CSS में एक छवि पर सेट करने के लिए पृष्ठभूमि-छवि संपत्ति का उपयोग करते हैं। यह तकनीक आपको छवियों से कस्टम पृष्ठभूमि बनाने की अनुमति देती है। यह रंगों या ग्रेडिएंट्स का उपयोग करने का एक विकल्प है।

इस लेख में, हमने चर्चा की कि बैकग्राउंड-इमेज प्रॉपर्टी का उपयोग कैसे करें और सीएसएस में बैकग्राउंड इमेज को कैसे स्टाइल करें। अब आपके पास एक विशेषज्ञ की तरह सीएसएस में पृष्ठभूमि छवियों को डिजाइन करना शुरू करने के लिए आवश्यक ज्ञान है।