CSS background-image प्रॉपर्टी वेबसाइट के बैकग्राउंड को एक इमेज में बदलती है। बैकग्राउंड इमेज background-image: url(url_of_image) प्रॉपर्टी का उपयोग करके सेट की जाती है। आप background-image प्रॉपर्टी का उपयोग करके कई बैकग्राउंड इमेजेज निर्दिष्ट कर सकते हैं जो ओवरलैप होती हैं।
बैकग्राउंड इमेज सेट करना
.image {
background-image: url(https://example.com/image.jpg);
height: 250px;
}
उदाहरण: कैफे बैनर
'The Coffee Grind' नामक एक स्थानीय कैफे के लिए एक साइट डिज़ाइन कर रहे हैं। उन्होंने हमें एक टॉप पेज बैनर बनाने के लिए कहा जो कॉफी कप की एक स्टॉक इमेज प्रदर्शित करता है, जिसके केंद्र में "Welcome to The Coffee Grind" लिखा हो।
एकाधिक बैकग्राउंड इमेजेज
background-image प्रॉपर्टी आपको CSS में एक एलिमेंट को एकाधिक बैकग्राउंड इमेजेज असाइन करने देती है। सिंटैक्स:
background-image: url(image1), url(image2);
पहली निर्दिष्ट इमेज एलिमेंट के शीर्ष पर दिखाई देगी, और बाद के एलिमेंट्स एक दूसरे के पीछे दिखाई देंगे।
बैकग्राउंड इमेज साइज़ (background-size)
background-size प्रॉपर्टी कंटेनर के भीतर बैकग्राउंड इमेज के आकार को कस्टमाइज़ करने के लिए उपयोग की जाती है। चार संभावित मान:
- auto: ब्राउज़र सर्वोत्तम आकार तय करता है (डिफ़ॉल्ट)।
- contain: वास्तविक इमेज आकार दिखाई देना चाहिए भले ही यह कंटेनर को न भरे।
- cover: इमेज को पूरे कंटेनर के आकार तक खींचने का निर्देश देता है।
- length: बैकग्राउंड इमेज की चौड़ाई और ऊंचाई। पहला मान चौड़ाई, दूसरा ऊंचाई सेट करता है।
उदाहरण: contain का उपयोग
.image {
background-image: url(...);
background-size: contain;
height: 250px;
}
उदाहरण: पिक्सेल आकार निर्दिष्ट करना
.image {
background-image: url(...);
background-size: 200px 200px;
height: 200px; width: 200px;
}
बैकग्राउंड इमेज पोजिशन (background-origin)
background-origin प्रॉपर्टी आपको वेब एलिमेंट के कंटेंट, बॉर्डर्स, या पैडिंग के अनुसार बैकग्राउंड इमेज को पोजिशन करने की अनुमति देती है।
- border-box: इमेज को बॉर्डर बॉक्स के सापेक्ष पोजिशन करता है।
- content-box: इमेज को कंटेंट बॉक्स के सापेक्ष पोजिशन करता है।
- padding-box: इमेज को पैडिंग बॉक्स के सापेक्ष पोजिशन करता है (डिफ़ॉल्ट)।
उदाहरण: content-box पोजिशनिंग
.image {
background-image: url(...);
border: 10px solid black;
padding: 25px;
background-origin: content-box;
background-repeat: no-repeat;
height: 250px;
}
निष्कर्ष
हम CSS में किसी एलिमेंट के बैकग्राउंड को इमेज पर सेट करने के लिए background-image प्रॉपर्टी का उपयोग करते हैं। यह तकनीक आपको इमेजेज से कस्टम बैकग्राउंड बनाने की अनुमति देती है। यह रंगों या ग्रेडिएंट्स का उपयोग करने का एक विकल्प है।
इस लेख में, हमने चर्चा की कि background-image प्रॉपर्टी का उपयोग कैसे करें और CSS में बैकग्राउंड इमेज को कैसे स्टाइल करें। अब आपके पास CSS में एक विशेषज्ञ की तरह बैकग्राउंड इमेज डिज़ाइन करना शुरू करने के लिए आवश्यक ज्ञान है।
