सीएसएस एकाधिक पृष्ठभूमि

इस अध्याय में आप सीखेंगे कि एक तत्व में कई पृष्ठभूमि छवियों को कैसे जोड़ा जाए।

आप निम्नलिखित गुणों के बारे में भी जानेंगे:

background-size
background-origin
background-clip

सीएसएस एकाधिक पृष्ठभूमि

background-imageCSS आपको संपत्ति के माध्यम से एक तत्व के लिए कई पृष्ठभूमि चित्र जोड़ने की अनुमति देता है ।

विभिन्न पृष्ठभूमि छवियों को अल्पविराम द्वारा अलग किया जाता है, और छवियों को एक दूसरे के ऊपर रखा जाता है, जहां पहली छवि दर्शक के सबसे करीब होती है।

निम्नलिखित उदाहरण में दो पृष्ठभूमि चित्र हैं, पहली छवि एक फूल है (नीचे और दाईं ओर संरेखित) और दूसरी छवि एक कागज़ की पृष्ठभूमि है (ऊपरी-बाएँ कोने में संरेखित):

उदाहरण

#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

एकाधिक पृष्ठभूमि छवियों को व्यक्तिगत पृष्ठभूमि गुणों (ऊपर के रूप में) या backgroundशॉर्टहैंड संपत्ति का उपयोग करके निर्दिष्ट किया जा सकता है।

निम्न उदाहरण backgroundशॉर्टहैंड प्रॉपर्टी का उपयोग करता है (ऊपर दिए गए उदाहरण के समान परिणाम):

उदाहरण

#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

सीएसएस पृष्ठभूमि आकार

CSS background-sizeगुण आपको पृष्ठभूमि छवियों का आकार निर्दिष्ट करने की अनुमति देता है।

आकार लंबाई, प्रतिशत या दो कीवर्ड में से किसी एक का उपयोग करके निर्दिष्ट किया जा सकता है: शामिल या कवर।

निम्न उदाहरण पृष्ठभूमि छवि को मूल छवि (पिक्सेल का उपयोग करके) से बहुत छोटा आकार देता है:

दर्द के लिए धन्यवाद

दर्द ही तो प्यार है

यही कारण है कि यह थोड़ा सा आने वाला है, जो हमारे सामान्य अभ्यास परिणामों का लाभ उठाने के लिए सहन करता है

यहाँ कोड है:

उदाहरण

#div1 {
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}

के लिए दो अन्य संभावित मान background-sizeहैं contain और cover।

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

कीवर्ड पृष्ठभूमि छवि को coverमापता है ताकि सामग्री क्षेत्र पूरी तरह से पृष्ठभूमि छवि से आच्छादित हो (इसकी चौड़ाई और ऊंचाई दोनों सामग्री क्षेत्र के बराबर या उससे अधिक हो)। जैसे, पृष्ठभूमि छवि के कुछ भाग पृष्ठभूमि स्थिति क्षेत्र में दिखाई नहीं दे सकते हैं।

निम्नलिखित उदाहरण containऔर के उपयोग को दर्शाता है cover:

उदाहरण

#div1 {
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}

#div2 {
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}

एकाधिक पृष्ठभूमि छवियों के आकार को परिभाषित करें

एकाधिक पृष्ठभूमि के background-sizeसाथ काम करते समय, संपत्ति पृष्ठभूमि आकार (अल्पविराम से अलग सूची का उपयोग करके) के लिए एकाधिक मान भी स्वीकार करती है।

निम्नलिखित उदाहरण में तीन पृष्ठभूमि छवियां निर्दिष्ट हैं, प्रत्येक छवि के लिए अलग-अलग पृष्ठभूमि-आकार मान के साथ:

उदाहरण

#example1 {
background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}

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

अब हम एक ऐसी वेबसाइट पर पृष्ठभूमि छवि रखना चाहते हैं जो हर समय संपूर्ण ब्राउज़र विंडो को कवर करे।

आवश्यकताएं इस प्रकार हैं:

पूरे पृष्ठ को छवि से भरें (कोई सफेद स्थान नहीं)
आवश्यकतानुसार छवि स्केल करें
पृष्ठ पर केंद्र छवि
स्क्रॉलबार का कारण न बनें

निम्न उदाहरण दिखाता है कि यह कैसे करना है; <html> तत्व का उपयोग करें (<html> तत्व हमेशा कम से कम ब्राउज़र विंडो की ऊंचाई का होता है)। फिर उस पर एक फिक्स्ड और सेंटर्ड बैकग्राउंड सेट करें। फिर इसके आकार को पृष्ठभूमि-आकार की संपत्ति के साथ समायोजित करें:

उदाहरण

html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}

हीरो छवि

आप नायक छवि (पाठ के साथ एक बड़ी छवि) बनाने के लिए <div> पर विभिन्न पृष्ठभूमि गुणों का भी उपयोग कर सकते हैं, और इसे जहां चाहें वहां रख सकते हैं।

उदाहरण

.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}

सीएसएस पृष्ठभूमि-मूल संपत्ति

CSS background-originगुण निर्दिष्ट करता है कि पृष्ठभूमि छवि कहाँ स्थित है।

संपत्ति तीन अलग-अलग मान लेती है:

बॉर्डर-बॉक्स - बैकग्राउंड इमेज बॉर्डर के ऊपरी बाएँ कोने से शुरू होती है
पैडिंग-बॉक्स - (डिफ़ॉल्ट) पृष्ठभूमि छवि पैडिंग किनारे के ऊपरी बाएँ कोने से शुरू होती है
सामग्री-बॉक्स - पृष्ठभूमि छवि सामग्री के ऊपरी बाएँ कोने से शुरू होती है

निम्नलिखित उदाहरण background-originसंपत्ति को दर्शाता है:

उदाहरण

#example1 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}

सीएसएस पृष्ठभूमि-क्लिप संपत्ति

CSS background-clipगुण पृष्ठभूमि के पेंटिंग क्षेत्र को निर्दिष्ट करता है।

संपत्ति तीन अलग-अलग मान लेती है:

बॉर्डर-बॉक्स - (डिफ़ॉल्ट) पृष्ठभूमि को बॉर्डर के बाहरी किनारे पर चित्रित किया गया है
पैडिंग-बॉक्स - पृष्ठभूमि को पैडिंग के बाहरी किनारे पर चित्रित किया गया है
सामग्री-बॉक्स - पृष्ठभूमि सामग्री बॉक्स के भीतर चित्रित की गई है

निम्नलिखित उदाहरण background-clipसंपत्ति को दर्शाता है:

उदाहरण

#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}

सीएसएस उन्नत पृष्ठभूमि गुण

Property	Description
background	A shorthand property for setting all the background properties in one declaration
background-clip	Specifies the painting area of the background
background-image	Specifies one or more background images for an element
background-origin	Specifies where the background image(s) is/are positioned
background-size	Specifies the size of the background image(s)

❮ पहले का अगला ❯

सीएसएस ट्यूटोरियल

सीएसएस उन्नत

सीएसएस उत्तरदायी

सीएसएस ग्रिड

सीएसएस एसएएसएस

सीएसएस उदाहरण

सीएसएस संदर्भ

सीएसएस एकाधिक पृष्ठभूमि