CSS => पृष्ठभूमि

परिचय

सीएसएस के साथ आप एक तत्व की पृष्ठभूमि के रूप में रंग, ग्रेडिएंट और चित्र सेट कर सकते हैं।

छवियों, रंगों और ग्रेडिएंट के विभिन्न संयोजनों को निर्दिष्ट करना और इनमें से आकार, स्थिति और पुनरावृत्ति (अन्य के बीच) को समायोजित करना संभव है।

वाक्य - विन्यास

पृष्ठभूमि-रंग: रंग | पारदर्शी | प्रारंभिक | वारिस;
पृष्ठभूमि-चित्र: url | कोई नहीं | प्रारंभिक | वारिस;
पृष्ठभूमि-स्थिति: मूल्य;
पृष्ठभूमि-आकार: <bg-size> [<bg-size>]
<bg-size>: ऑटो | लंबाई | कवर | होते हैं | प्रारंभिक | वारिस;
बैकग्राउंड-रिपीट: रिपीट | रिपीट-एक्स | रिपीट-वाई | नहीं-दोहराना | प्रारंभिक | वारिस;
पृष्ठभूमि-मूल: गद्दी-बॉक्स | सीमा-बक्सा | सामग्री-बॉक्स | प्रारंभिक | वारिस;
बैकग्राउंड-क्लिप: बॉर्डर-बॉक्स | गद्दी-बॉक्स | सामग्री-बॉक्स | प्रारंभिक | वारिस;
पृष्ठभूमि-लगाव: स्क्रॉल | तय | स्थानीय | प्रारंभिक | वारिस;
पृष्ठभूमि: बीजी-रंग बीजी-छवि स्थिति / बीजी-आकार बीजी-रिपीट बीजी-मूल बीजी-क्लिप बीजी-अटैचमेंट प्रारंभिक | वारिस;

टिप्पणियों

CSS3 ग्रेडिएंट 10 से कम इंटरनेट एक्सप्लोरर के संस्करणों पर काम नहीं करेगा।

पीछे का रंग

background-color संपत्ति एक रंग मान का उपयोग करते हुए या कीवर्ड के माध्यम से तत्व का पृष्ठभूमि रंग सेट करती है, जैसे कि transparent , inherit या initial ।

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

इसे सभी तत्वों पर लागू किया जा सकता है, और ::first-letter / ::first-line छद्म तत्व ।

CSS में रंग अलग-अलग तरीकों से निर्दिष्ट किए जा सकते हैं।

रंग के नाम

सीएसएस

div {
  background-color: red;  /* red */
}

एचटीएमएल

<div>This will have a red background</div>

ऊपर उपयोग किया गया उदाहरण कई तरीकों में से एक है, जिसे सीएसएस को एक ही रंग का प्रतिनिधित्व करना है।

हेक्स रंग कोड

हेक्स कोड का उपयोग बेस -16 हेक्साडेसिमल नोटेशन में एक रंग के RGB घटकों को दर्शाने के लिए किया जाता है। # ff0000, उदाहरण के लिए, चमकदार लाल है, जहां रंग का लाल घटक 256 बिट्स (एफएफ) है और रंग का संबंधित हरा और नीला भाग 0 (00) है।

यदि तीन आरजीबी युग्मों (आर, जी, और बी) में से प्रत्येक में दोनों मान समान हैं, तो रंग कोड को तीन वर्णों (प्रत्येक युग्मन का पहला अंक) में छोटा किया जा सकता है। #ff0000 को छोटा किया जा सकता #f00 , और #ffffff को छोटा किया जा सकता #fff ।

हेक्स नोटेशन केस-असंवेदनशील है।

body {
  background-color: #de1205; /* red */
}

.main {
  background-color: #00f; /* blue */
}

RGB / RGBa

रंग घोषित करने का दूसरा तरीका RGB या RGBa का उपयोग करना है।

RGB लाल, हरे और नीले रंग के लिए खड़ा है, और 0 और 255 के बीच तीन अलग-अलग मानों की आवश्यकता होती है, कोष्ठक के बीच रखा जाता है, जो क्रमशः लाल, हरे और नीले रंग के लिए दशमलव रंग मानों के साथ मेल खाता है।

RGBa आपको अपारदर्शिता को परिभाषित करने के लिए 0.0 और 1.0 के बीच एक अतिरिक्त अल्फा पैरामीटर जोड़ने की अनुमति देता है।

header {
  background-color: rgb(0, 0, 0); /* black */
}

footer {
  background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}

एचएसएल / एचएसएलए

रंग घोषित करने का दूसरा तरीका HSL या HSLa का उपयोग करना है और RGB और RGBa के समान है।

एचएसएल का मतलब होता है ह्यू, सैचुरेशन और लाइटनेस, और इसे अक्सर एचएलएस भी कहा जाता है:

ह्यू रंग पहिया पर एक डिग्री है (0 से 360 तक)।
संतृप्ति 0% और 100% के बीच एक प्रतिशत है।
लपट भी 0% और 100% के बीच एक प्रतिशत है।

HSLa आपको अस्पष्टता को परिभाषित करने के लिए 0.0 और 1.0 के बीच एक अतिरिक्त अल्फा पैरामीटर जोड़ने की अनुमति देता है।

li a {
  background-color: hsl(120, 100%, 50%); /* green */
}

#p1 {
  background-color: hsla(120, 100%, 50%, .3); /* green with 30% opacity */
}

पृष्ठभूमि-छवि के साथ सहभागिता

निम्नलिखित कथन सभी समतुल्य हैं:

body {
  background: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-color: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-image: url(partiallytransparentimage.png);
  background-color: red;
}

body {
  background: red url(partiallytransparentimage.png);
}

वे सभी छवि के नीचे दिखाए जा रहे लाल रंग का नेतृत्व करेंगे, जहां छवि के हिस्से पारदर्शी हैं, या छवि दिखाई नहीं दे रही है (शायद background-repeat परिणामस्वरूप)।

ध्यान दें कि निम्नलिखित समतुल्य नहीं है:

body {
  background-image: url(partiallytransparentimage.png);
  background: red;
}

यहां, background का मान आपकी background-image ओवरराइड करता है।

background संपत्ति के बारे में अधिक जानकारी के लिए, पृष्ठभूमि आशुलिपि देखें

पृष्ठभूमि छवि

background-image गुण का उपयोग सभी मिलान तत्वों पर लागू होने वाली पृष्ठभूमि छवि को निर्दिष्ट करने के लिए किया जाता है। डिफ़ॉल्ट रूप से, इस छवि को मार्जिन को छोड़कर पूरे तत्व को कवर करने के लिए टाइल किया गया है।

.myClass {
  background-image: url('/path/to/image.jpg');
}

background-image रूप में कई छवियों का उपयोग करने के लिए, अल्पविराम से अलग url() को परिभाषित करें url()

.myClass {
  background-image: url('/path/to/image.jpg'),
                    url('/path/to/image2.jpg');
}

छवियों को उनके आदेश के अनुसार दूसरों के शीर्ष पर पहली घोषित छवि के साथ स्टैक किया जाएगा।

मूल्य	परिणाम
`url('/path/to/image.jpg')`	पृष्ठभूमि की छवि का पथ निर्दिष्ट करें या डेटा URI स्कीमा के साथ निर्दिष्ट छवि संसाधन (एपोस्ट्रोफिस को छोड़ा जा सकता है), अल्पविराम द्वारा अलग गुणक
`none`	कोई पृष्ठभूमि छवि नहीं
`initial`	डिफ़ॉल्ट मान
`inherit`	अभिभावक का मान

पृष्ठभूमि छवि के लिए अधिक सीएसएस

यह निम्नलिखित विशेषताएँ बहुत उपयोगी हैं और लगभग आवश्यक भी हैं।

background-size:     xpx ypx | x% y%;
background-repeat:   no-repeat | repeat | repeat-x | repeat-y;
background-position: left offset (px/%) right offset (px/%) | center center | left top | right bottom;

पृष्ठभूमि के स्नातक

CSS3 में जोड़े गए नए छवि प्रकार हैं। एक छवि के रूप में, ग्रेडिएंट को background-image संपत्ति या background आशुलिपि के साथ सेट किया जाता है।

दो प्रकार के ग्रेडिएंट फ़ंक्शन हैं, रैखिक और रेडियल। प्रत्येक प्रकार में एक गैर-दोहराव प्रकार होता है और एक दोहरा संस्करण होता है:

linear-gradient()
repeating-linear-gradient()
radial-gradient()
repeating-radial-gradient()

रैखिक ढलान()

एक linear-gradient में निम्नलिखित सिंटैक्स होता है

background: linear-gradient( <direction>?, <color-stop-1>, <color-stop-2>, ...);

मूल्य अर्थ

<direction> एक तर्क हो सकता to top to bottom , to bottom to right या to left ; या 0deg , 90deg रूप में एक कोण ...। कोण ऊपर से शुरू होता है और दक्षिणावर्त घूमता है। डाउन , ग्रेड , रेड , या टर्न में निर्दिष्ट किया जा सकता है। यदि छोड़ दिया जाता है, तो ढाल ऊपर से नीचे की ओर बहती है

<color-stop-list> रंगों की सूची, इसे प्रदर्शित करने के लिए वैकल्पिक रूप से प्रतिशत या लंबाई से प्रत्येक का अनुसरण किया जाता है। उदाहरण के लिए, yellow 10% , rgba(0,0,0,.5) 40px , # #fff 100% ...

मूल्य	अर्थ
`<direction>`	एक तर्क हो सकता `to top` `to bottom` , `to bottom` `to right` या `to left` ; या `0deg` , `90deg` रूप में एक कोण ...। कोण ऊपर से शुरू होता है और दक्षिणावर्त घूमता है। डाउन , ग्रेड , रेड , या टर्न में निर्दिष्ट किया जा सकता है। यदि छोड़ दिया जाता है, तो ढाल ऊपर से नीचे की ओर बहती है
`<color-stop-list>`	रंगों की सूची, इसे प्रदर्शित करने के लिए वैकल्पिक रूप से प्रतिशत या लंबाई से प्रत्येक का अनुसरण किया जाता है। उदाहरण के लिए, `yellow 10%` , `rgba(0,0,0,.5) 40px` , # `#fff 100%` ...

उदाहरण के लिए, यह एक रैखिक ढाल बनाता है जो दाईं ओर से शुरू होता है और लाल से नीले रंग में परिवर्तित होता है

.linear-gradient {
  background: linear-gradient(to left, red, blue); /* you can also use 270deg */
}

आप एक क्षैतिज और ऊर्ध्वाधर दोनों स्थिति की घोषणा करके diagonal ढाल बना सकते हैं।

.diagonal-linear-gradient {
  background: linear-gradient(to left top, red, yellow 10%);
}

किसी भी रंग के स्टॉप की संख्या को अल्पविराम से अलग करके संभव है। निम्नलिखित उदाहरण 8 रंग स्टॉप के साथ एक ढाल बनाएंगे

.linear-gradient-rainbow {
  background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet)
}

रेडियल-ढाल ()

.radial-gradient-simple {
  background: radial-gradient(red, blue);
}

.radial-gradient {
  background: radial-gradient(circle farthest-corner at top left, red, blue);
}

मूल्य	अर्थ
`circle`	ढाल का आकार। मान `circle` या `ellipse` , डिफ़ॉल्ट `ellipse` ।
`farthest-corner`	अंतिम आकार कितना बड़ा होना चाहिए इसका वर्णन करने वाले कीवर्ड। मूल्य `closest-side` , `farthest-side` , `closest-corner` , `farthest-corner`
`top left`	ग्रेडिएंट सेंटर की स्थिति को उसी तरह सेट करता है, जिस तरह से `background-position` ।

बार-बार ग्रेडिंग करना

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

.bullseye {
  background: repeating-radial-gradient(red, red 10%, white 10%, white 20%);
}
.warning {
  background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20% );
}

मूल्य	अर्थ
`-45deg`	कोण इकाई । कोण ऊपर से शुरू होता है और दक्षिणावर्त घूमता है। डाउन , ग्रेड , रेड , या टर्न में निर्दिष्ट किया जा सकता है।
`to left`	ग्रेडिएंट की दिशा, डिफ़ॉल्ट `to bottom` । सिंटेक्स: `to [y-axis(top OR bottom)] [x-axis(left OR right)]` यानी `to top right`
`yellow 10%`	रंग, वैकल्पिक रूप से इसे प्रदर्शित करने के लिए प्रतिशत या लंबाई के बाद। दो या अधिक बार दोहराया।

ध्यान दें कि HEX, RGB, RGBa, HSL और HSLa कलर कोड का उपयोग रंग के नाम के बजाय किया जा सकता है। चित्रण के लिए रंग नामों का उपयोग किया गया था। यह भी ध्यान दें कि रेडियल-ग्रेडिएंट सिंटैक्स रैखिक-ढाल की तुलना में बहुत अधिक जटिल है, और एक सरलीकृत संस्करण यहां दिखाया गया है। पूर्ण विवरण और चश्मा के लिए, MDN डॉक्स देखें

पृष्ठभूमि आशुलिपि

background संपत्ति का उपयोग एक या अधिक पृष्ठभूमि से संबंधित गुणों को सेट करने के लिए किया जा सकता है:

मूल्य	विवरण	CSS Ver।
`background-image`	पृष्ठभूमि छवि का उपयोग करने के लिए	1 +
`background-color`	लागू करने के लिए पृष्ठभूमि का रंग	1 +
`background-position`	पृष्ठभूमि छवि की स्थिति	1 +
`background-size`	पृष्ठभूमि छवि का आकार	3 +
`background-repeat`	बैकग्राउंड इमेज को कैसे दोहराएं	1 +
`background-origin`	पृष्ठभूमि कैसे पोस्ट की जाती है (जब `background-attachment` `fixed` जाता है तो नजरअंदाज कर दिया जाता `fixed` )	3 +
`background-clip`	`content-box` , `border-box` या `padding-box` सापेक्ष पृष्ठभूमि को कैसे चित्रित किया जाता है	3 +
`background-attachment`	पृष्ठभूमि की छवि कैसे व्यवहार करती है, क्या यह अपने युक्त ब्लॉक के साथ स्क्रॉल करता है या व्यूपोर्ट के भीतर एक निश्चित स्थिति है	1 +
`initial`	डिफ़ॉल्ट के लिए मान सेट करता है	3 +
`inherit`	माता-पिता से संपत्ति का मूल्य अर्जित करता है	2 +

मूल्यों का क्रम मायने नहीं रखता है और हर मूल्य वैकल्पिक है

वाक्य - विन्यास

पृष्ठभूमि आशुलिपि घोषणा की वाक्य रचना है:

background: [<background-image>] [<background-color>]  [<background-position>]/[<background-size>] [<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>] [<initial|inherit>];

उदाहरण

background: red;

बस red मान के साथ एक background-color सेट करना।

background: border-box red;

बॉर्डर बॉक्स के लिए एक background-clip सेट करना और एक background-color लाल करना।

background: no-repeat center url("somepng.jpg");

एक background-repeat को दोहराता है, केंद्र में background-origin और एक background-image लिए एक background-image करता है।

background: url('pattern.png') green;

इस उदाहरण में, तत्व का background-color pattern.png साथ green सेट किया जाएगा। अगर यह उपलब्ध है, तो रंग को ओवरले किया गया है, जो तत्व को भरने के लिए जितनी बार आवश्यक हो दोहराता है। यदि pattern.png में कोई पारदर्शिता शामिल है, तो उसके पीछे green रंग दिखाई देगा।

background: #000000 url("picture.png") top left / 600px auto no-repeat;

इस उदाहरण में हमारे पास शीर्ष पर एक छवि 'चित्र.पिंग' के साथ एक काली पृष्ठभूमि है, छवि किसी भी अक्ष में नहीं दोहराती है और शीर्ष बाएं कोने में स्थित है। स्थिति के बाद / पृष्ठभूमि की छवि का आकार शामिल करने में सक्षम होना चाहिए जो इस मामले में ऊंचाई के लिए 600px चौड़ाई और ऑटो के रूप में सेट है। यह उदाहरण फीचर इमेज के साथ अच्छी तरह से काम कर सकता है जो ठोस रंग में फीका हो सकता है।

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

पृष्ठभूमि की स्थिति

पृष्ठभूमि छवि या ढाल के लिए प्रारंभिक स्थिति निर्दिष्ट करने के लिए background-position संपत्ति का उपयोग किया जाता है

.myClass {
  background-image: url('path/to/image.jpg');
  background-position: 50% 50%;
}

स्थिति एक एक्स और वाई समन्वय का उपयोग करके सेट की गई है और सीएसएस के भीतर उपयोग की जाने वाली किसी भी इकाई का उपयोग करके सेट किया जा सकता है।

इकाई विवरण

मान % मान % क्षैतिज ऑफसेट के लिए एक प्रतिशत पृष्ठभूमि की स्थिति (पृष्ठभूमि छवि की चौड़ाई - चौड़ाई) के सापेक्ष है।
ऊर्ध्वाधर ऑफसेट के लिए एक प्रतिशत (पृष्ठभूमि स्थिति क्षेत्र की ऊंचाई - पृष्ठभूमि छवि की ऊंचाई) के सापेक्ष है
छवि का आकार background-size द्वारा दिया गया background-size ।

मान px मान px बैकग्राउंड पोजिशनिंग एरिया के टॉप लेफ्ट के सापेक्ष पिक्सल में दी गई लंबाई से ऑफ़सेट बैकग्राउंड इमेज

इकाई	विवरण
मान % मान %	क्षैतिज ऑफसेट के लिए एक प्रतिशत पृष्ठभूमि की स्थिति (पृष्ठभूमि छवि की चौड़ाई - चौड़ाई) के सापेक्ष है। ऊर्ध्वाधर ऑफसेट के लिए एक प्रतिशत (पृष्ठभूमि स्थिति क्षेत्र की ऊंचाई - पृष्ठभूमि छवि की ऊंचाई) के सापेक्ष है छवि का आकार `background-size` द्वारा दिया गया `background-size` ।
मान px मान px	बैकग्राउंड पोजिशनिंग एरिया के टॉप लेफ्ट के सापेक्ष पिक्सल में दी गई लंबाई से ऑफ़सेट बैकग्राउंड इमेज

CSS में इकाइयाँ विभिन्न तरीकों से निर्दिष्ट की जा सकती हैं ( यहाँ देखें)।

Longhand पृष्ठभूमि स्थिति गुण

ऊपर की शॉर्टहैंड प्रॉपर्टी के अलावा, लॉन्गहैंड बैकग्राउंड प्रॉपर्टीज़ background-position-x और background-position-y भी उपयोग कर सकते हैं। ये आपको एक्स या वाई स्थिति को अलग से नियंत्रित करने की अनुमति देते हैं।

नोट: यह फ़ायरफ़ॉक्स (संस्करण 31-48) 2 को छोड़कर सभी ब्राउज़रों में समर्थित है। फ़ायरफ़ॉक्स 49, सितंबर 2016 को जारी किया जाएगा , इन गुणों का समर्थन करेगा । तब तक, इस स्टैक ओवरफ्लो जवाब के भीतर एक फ़ायरफ़ॉक्स हैक है।

पृष्ठभूमि संलग्न

बैकग्राउंड-अटैचमेंट प्रॉपर्टी सेट करती है कि बैकग्राउंड इमेज फिक्स है या बाकी पेज के साथ स्क्रॉल करता है।

body { 
  background-image: url('img.jpg');
  background-attachment: fixed;
}

मूल्य	विवरण
स्क्रॉल	तत्व के साथ पृष्ठभूमि स्क्रॉल करता है। यह डिफ़ॉल्ट है।
तय	व्यूपोर्ट के संबंध में पृष्ठभूमि निश्चित है।
स्थानीय	तत्व की सामग्री के साथ पृष्ठभूमि स्क्रॉल करती है।
प्रारंभिक	इस गुण को इसके डिफ़ॉल्ट मान पर सेट करता है।
इनहेरिट	इस संपत्ति को इसके मूल तत्व से विरासत में मिला है।

उदाहरण

पृष्ठभूमि-लगाव: स्क्रॉल

डिफ़ॉल्ट व्यवहार, जब शरीर को स्क्रॉल किया जाता है, तो पृष्ठभूमि उसके साथ स्क्रॉल होती है:

body {
  background-image: url('image.jpg');
  background-attachment: scroll;
}

पृष्ठभूमि-लगाव: निश्चित

बैकग्राउंड इमेज को ठीक किया जाएगा और जब बॉडी को स्क्रॉल किया जाएगा तो वह आगे नहीं बढ़ेगा:

body {
  background-image: url('image.jpg');
  background-attachment: fixed;
}

पृष्ठभूमि-लगाव: स्थानीय

Div की पृष्ठभूमि छवि स्क्रॉल होगी जब div की सामग्री स्क्रॉल की जाती है।

div {
  background-image: url('image.jpg');
  background-attachment: local;
}

पृष्ठभूमि दोहराएँ

बैकग्राउंड-रिपीट प्रॉपर्टी सेट करती है कि क्या / कैसे बैकग्राउंड इमेज दोहराई जाएगी।

डिफ़ॉल्ट रूप से, एक पृष्ठभूमि-छवि दोनों लंबवत और क्षैतिज रूप से दोहराई जाती है।

div {
  background-image: url("img.jpg");
  background-repeat: repeat-y;
}

यहां बताया गया है कि background-repeat: repeat-y कैसा दिखता है:

अस्पष्टता के साथ पृष्ठभूमि का रंग

यदि आप किसी तत्व पर opacity निर्धारित करते हैं तो यह उसके सभी बाल तत्वों को प्रभावित करेगा। किसी तत्व की पृष्ठभूमि पर एक अस्पष्टता निर्धारित करने के लिए आपको RGBA रंगों का उपयोग करना होगा। निम्नलिखित उदाहरण में 0.6 अपारदर्शिता के साथ एक काली पृष्ठभूमि होगी।

/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);

/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);

/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

मल्टीपल बैकग्राउंड इमेज

CSS3 में, हम एक ही तत्व में कई बैकग्राउंड को स्टैक कर सकते हैं।

#mydiv {
  background-image: url(img_1.png), /* top image */
                    url(img_2.png), /* middle image */
                    url(img_3.png); /* bottom image */
  background-position: right bottom,
                       left top,
                       right top;
  background-repeat: no-repeat,
                     repeat,
                     no-repeat;
}

छवियाँ शीर्ष पर पहली पृष्ठभूमि और पिछले पृष्ठभूमि के साथ एक दूसरे के ऊपर खड़ी हो जाएंगी। img_1 शीर्ष पर होगा, img_2 और img_3 नीचे है।

हम इसके लिए बैकग्राउंड शॉर्टहैंड प्रॉपर्टी का भी उपयोग कर सकते हैं:

#mydiv {
  background: url(img_1.png) right bottom no-repeat,
              url(img_2.png) left top repeat,
              url(img_3.png) right top no-repeat;
}

हम चित्र और ग्रेडिएंट भी स्टैक कर सकते हैं:

#mydiv {
  background: url(image.png) right bottom no-repeat,
              linear-gradient(to bottom, #fff 0%,#000 100%);
}

डेमो

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

पृष्ठभूमि-मूल गुण निर्दिष्ट करता है जहां पृष्ठभूमि छवि स्थित है।

नोट: यदि background-attachment प्रॉपर्टी fixed हो fixed , तो इस प्रॉपर्टी पर कोई असर नहीं पड़ता है।

डिफ़ॉल्ट मान: padding-box

संभावित मान:

padding-box - स्थिति पेडिंग बॉक्स के सापेक्ष होती है
border-box - स्थिति बॉर्डर बॉक्स के सापेक्ष होती है
content-box - स्थिति सामग्री बॉक्स के सापेक्ष है
initial
inherit

सीएसएस

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

एचटीएमएल

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

परिणाम:

अधिक:

https://www.w3.org/TR/css3-background/#the-background-origin

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

बैकग्राउंड क्लिप

परिभाषा और उपयोग: background-clip गुण background-clip के पेंटिंग क्षेत्र को निर्दिष्ट करता है।

डिफ़ॉल्ट मान: border-box

मान

border-box डिफ़ॉल्ट मान है। यह पृष्ठभूमि को तत्व की सीमा के बाहरी किनारे तक सभी तरह से विस्तारित करने की अनुमति देता है।
padding-box तत्व के पैडिंग के बाहरी किनारे पर पृष्ठभूमि को क्लिप करता है और इसे सीमा में विस्तारित नहीं होने देता है;
content-box के किनारे पर पृष्ठभूमि को क्लिप करता है।
inherit में चयनित तत्व के लिए माता-पिता की सेटिंग लागू होती है।

सीएसएस

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

एचटीएमएल

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

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

सामान्य अवलोकन

background-size संपत्ति एक को background-image के स्केलिंग को नियंत्रित करने में सक्षम बनाती है। यह दो मान तक ले जाता है, जो ऊर्ध्वाधर और क्षैतिज दिशा में परिणामी छवि के पैमाने / आकार को निर्धारित करता है। यदि संपत्ति गायब है, तो width और height दोनों में इसका डीम्ड auto ।

auto छवि के पहलू अनुपात को रखेगा, अगर यह निर्धारित किया जा सकता है। ऊंचाई वैकल्पिक है और इसे auto माना जा सकता है। इसलिए, एक 256 px × 256 px छवि पर, सभी निम्न background-size सेटिंग में 50 px की ऊँचाई और चौड़ाई के साथ एक छवि प्राप्त होगी:

background-size: 50px;
background-size: 50px auto; /* same as above */
background-size: auto 50px;
background-size: 50px 50px;

तो अगर हम निम्नलिखित चित्र (जिसमें 256 px × 256 px का उल्लिखित आकार है) के साथ शुरू हुआ,

हम अपने तत्व की पृष्ठभूमि में निहित उपयोगकर्ता की स्क्रीन पर 50 px × 50 px के साथ समाप्त करेंगे:

एक तत्व के सम्मान के साथ छवि को स्केल करने के लिए प्रतिशत मान का उपयोग भी कर सकता है। निम्नलिखित उदाहरण एक 200 px × 133 px खींची गई छवि प्रदान करेगा:

#withbackground {
    background-image: url(to/some/background.png);

    background-size: 100% 66%;
    
    width: 200px;
    height: 200px;

    padding: 0;
    margin: 0;
}

व्यवहार background-origin पर निर्भर करता है।

पहलू अनुपात रखते हुए

प्रीवियस खंड में अंतिम उदाहरण ने अपना मूल पहलू अनुपात खो दिया। सर्कल एक दीर्घवृत्त, एक आयत में वर्ग, एक अन्य त्रिकोण में मिला।

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

के लिए Eggsplanation `contain` और `cover`

बुरी सजा के लिए खेद है, लेकिन हम प्रदर्शन के लिए बिस्वरुप गांगुली द्वारा दिन की एक तस्वीर का उपयोग करने जा रहे हैं। चलो कहते हैं कि यह आपकी स्क्रीन है, और ग्रे क्षेत्र आपकी दृश्यमान स्क्रीन के बाहर है। प्रदर्शन के लिए, हम 16 × 9 अनुपात मानने जा रहे हैं।

स्क्रीन

हम पृष्ठभूमि के रूप में दिन के उपरोक्त चित्र का उपयोग करना चाहते हैं। हालाँकि, हमने किसी कारण से छवि को 4x3 पर क्रॉप कर दिया। हम background-size संपत्ति को कुछ निश्चित लंबाई में सेट कर सकते हैं, लेकिन हम contain और cover पर ध्यान केंद्रित करेंगे। ध्यान दें कि मैं यह भी मानता हूं कि हमने body की चौड़ाई और / या ऊंचाई को कम नहीं किया body ।

`contain`

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

यह सुनिश्चित करता है कि पृष्ठभूमि की छवि हमेशा पृष्ठभूमि स्थिति क्षेत्र में पूरी तरह से निहित है, हालांकि, इस मामले में आपके background-color से भरा कुछ खाली स्थान हो सकता है:

शामिल

`cover`

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

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

आवरण

वास्तविक कोड के साथ प्रदर्शन

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

पृष्ठभूमि-मिश्रण-मोड संपत्ति

.my-div {
    width: 300px;
    height: 200px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, black 0%,white 100%), url('https://static.pexels.com/photos/54624/strawberry-fruit-red-sweet-54624-medium.jpeg');
    background-blend-mode:saturation;
}

<div class="my-div">Lorem ipsum</div>

यहां देखें रिजल्ट: https://jsfiddle.net/MadalinaTn/y69d28Lb/

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

CSS
पृष्ठभूमि

खोज…

परिचय

वाक्य - विन्यास

टिप्पणियों

पीछे का रंग

रंग के नाम

हेक्स रंग कोड

RGB / RGBa

एचएसएल / एचएसएलए

पृष्ठभूमि-छवि के साथ सहभागिता

पृष्ठभूमि छवि

पृष्ठभूमि के स्नातक

रैखिक ढलान()

रेडियल-ढाल ()

बार-बार ग्रेडिंग करना

पृष्ठभूमि आशुलिपि

वाक्य - विन्यास

उदाहरण

पृष्ठभूमि की स्थिति

Longhand पृष्ठभूमि स्थिति गुण

पृष्ठभूमि संलग्न

उदाहरण

पृष्ठभूमि-लगाव: स्क्रॉल

पृष्ठभूमि-लगाव: निश्चित

पृष्ठभूमि-लगाव: स्थानीय

पृष्ठभूमि दोहराएँ

अस्पष्टता के साथ पृष्ठभूमि का रंग

मल्टीपल बैकग्राउंड इमेज

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

बैकग्राउंड क्लिप

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

सामान्य अवलोकन

पहलू अनुपात रखते हुए

के लिए Eggsplanation `contain` और `cover`

`contain`

`cover`

वास्तविक कोड के साथ प्रदर्शन

पृष्ठभूमि-मिश्रण-मोड संपत्ति

परिचय

वाक्य - विन्यास

टिप्पणियों

पीछे का रंग

रंग के नाम

हेक्स रंग कोड

RGB / RGBa

एचएसएल / एचएसएलए

पृष्ठभूमि-छवि के साथ सहभागिता

पृष्ठभूमि छवि

पृष्ठभूमि के स्नातक

रैखिक ढलान()

रेडियल-ढाल ()

बार-बार ग्रेडिंग करना

पृष्ठभूमि आशुलिपि

वाक्य - विन्यास

उदाहरण

पृष्ठभूमि की स्थिति

Longhand पृष्ठभूमि स्थिति गुण

पृष्ठभूमि संलग्न

उदाहरण

पृष्ठभूमि-लगाव: स्क्रॉल

पृष्ठभूमि-लगाव: निश्चित

पृष्ठभूमि-लगाव: स्थानीय

पृष्ठभूमि दोहराएँ

अस्पष्टता के साथ पृष्ठभूमि का रंग

मल्टीपल बैकग्राउंड इमेज

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

बैकग्राउंड क्लिप

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

सामान्य अवलोकन

पहलू अनुपात रखते हुए

के लिए Eggsplanation contain और cover

contain

cover

वास्तविक कोड के साथ प्रदर्शन

पृष्ठभूमि-मिश्रण-मोड संपत्ति

के लिए Eggsplanation `contain` और `cover`

`contain`

`cover`