CSS बहुलकालकी बैकग्राउंड

इस चैप्टर में, आपको एक एलीमेंट में कई बैकग्राउंड इमेज को जोड़ने का क्या करना है, इसे सीखा जाएगा。

आप इसके साथ निम्नलिखित विशेषताओं को भी सीखेंगे:

  • background-size
  • background-origin
  • background-clip

CSS बहुलकालकी बैकग्राउंड

CSS के द्वारा background-image विशेषता एक एलीमेंट को कई बैकग्राउंड इमेज जोड़ती है。

अलग-अलग बैकग्राउंड इमेज को कोमा से अलग किया जाता है, और इमेज एक दूसरे के ऊपर पड़ती हैं, जिसमें पहला इमेज दृश्यकों के निकटतम है。

निम्नलिखित उदाहरण में दो बैकग्राउंड इमेज हैं, पहला इमेज फूल (अधिरेख के नीचे और दाएँ साथ में जुड़ा हुआ) है, दूसरा इमेज पेपर बैकग्राउंड (अधिरेख के बाएँ और ऊपर साथ में जुड़ा हुआ) है:

उदाहरण

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

स्वयं को प्रयोग करें

बहुलकालकी बैकग्राउंड इमेज को अलग से बैकग्राउंड विशेषता (जैसा कि ऊपर बताया गया है) या background आब्रुद्धि विशेषता को निर्दिष्ट करने के लिए उपयोग किया जाता है:

निम्नलिखित उदाहरण में background आब्रुद्धि विशेषता (परिणाम पिछले उदाहरण के समान है):

उदाहरण

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

स्वयं को प्रयोग करें

CSS बैकग्राउंड आकार

CSS background-size प्रतियोगिता बैकग्राउंड इमेज का आकार निर्दिष्ट करने की अनुमति देती है।

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

नीचे दिए उदाहरण में बैकग्राउंड इमेज का आकार को आधिकारिक इमेज से काफी कम कर दिया गया है (पिक्सल के रूप में):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

यह कोड है:

उदाहरण

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

स्वयं को प्रयोग करें

background-size के दो अन्य संभाव्य मूल्य हैं कॉन्टेन और कवर。

कॉन्टेन शब्दांतरण बैकग्राउंड इमेज को जितना बड़ा हो सकता है तालिम करता है (बड़ा करने के लिए इसकी चौड़ाई और ऊंचाई सामग्री क्षेत्र के अनुसार होनी चाहिए)। इस तरह, बैकग्राउंड इमेज और बैकग्राउंड स्थानांतरण क्षेत्र के अनुपात के आधार पर, कुछ बैकग्राउंड क्षेत्र बैकग्राउंड इमेज से ढका नहीं हो सकते हैं।

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

नीचे का उदाहरण दिखाता है कॉन्टेन और कवर का उपयोग:

उदाहरण

#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 प्रतियोगिता बहुत सेट बैकग्राउंड आकार के मूल्यों को स्वीकार कर सकती है (कमा से विभाजित सूची के रूप में)।

नीचे दिए उदाहरण में तीन बैकग्राउंड इमेज निर्दिष्ट किए गए हैं, प्रत्येक इमेज के लिए अलग background-size मूल्य:

उदाहरण

#example1 {
  background: url(tree.png) लेफ्ट टॉप नॉ रीपीट, url(flower.gif) राइट बॉटम नॉ रीपीट,; 
  	url(paper.gif) लेफ्ट टॉप रीपीट;
  background-size: 50px, 130px, auto;
}

स्वयं को प्रयोग करें

पूर्ण आकार पृष्ठभूमि चित्र

अब हम चाहते हैं कि वेबसाइट के पृष्ठभूमि चित्र केवल ब्राउज़र विंडो के पूरे क्षेत्र को कवर करे。

विशिष्ट आवश्यकताएँ नीचे दी गई हैं:

  • पृष्ठ को पूरी तरह से चित्र से भरें (शून्य खाली स्थान)
  • आवश्यकता के अनुसार चित्र को फैलाएं
  • पृष्ठ पर चित्र को केंद्रित करें
  • स्क्रॉल बार को निकाला

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

उदाहरण

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

स्वयं को प्रयोग करें

Hero Image

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

उदाहरण

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

स्वयं को प्रयोग करें

CSS background-origin अट्रिब्यूट

CSS background-origin गुण पृष्ठभूमि चित्र के स्थान को निर्दिष्ट करता है。

इस गुण को तीन अलग-अलग मूल्य प्रस्तुत किए जाते हैं:

  • border-box - पृष्ठभूमि चित्र को किनारे के लेफ्ट टॉप से शुरू होना
  • padding-box - पृष्ठभूमि चित्र को आंतरिक सीमा के लेफ्ट टॉप से शुरू होना (मूलभूत)
  • content-box - पृष्ठभूमि चित्र को सामग्री के लेफ्ट टॉप से शुरू होना

नीचे का उदाहरण दिखाता है background-origin गुण:

उदाहरण

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

स्वयं को प्रयोग करें

CSS background-clip अट्रिब्यूट

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

इस गुण को तीन अलग-अलग मूल्य प्रस्तुत किए जाते हैं:

  • border-box - पृष्ठभूमि को किनारे के बाहरी किनारे तक चित्रित करना (मूलभूत)
  • padding-box - पृष्ठभूमि को आंतरिक सीमा के बाहरी किनारे तक चित्रित करना (मूलभूत)
  • content-box - पृष्ठभूमि को सामग्री बॉक्स में चित्रित करना

नीचे का उदाहरण दिखाता है background-clip गुण:

उदाहरण

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

स्वयं को प्रयोग करें

CSS उन्नत पृष्ठभूमि अट्रिब्यूट

अट्रिब्यूट वर्णन
background एक घोषणा में सभी पृष्ठभूमि अट्रिब्यूटों को सेट करने के लिए एक सरलीकृत अट्रिब्यूट
background-clip पृष्ठभूमि के रंग ड्रा करने के क्षेत्र को निर्धारित करता है。
background-image एक एलिमेंट को एक या अनेक पृष्ठभूमि इमेज निर्दिष्ट करता है。
background-origin पृष्ठभूमि इमेज के स्थान को निर्धारित करता है。
background-size पृष्ठभूमि इमेज के आकार को निर्धारित करता है。