background-image प्रॉपर्टी
background-image प्रॉपर्टी एलिमेंट की बैकग्राउंड
इमेज सेट करती है। डिफॉल्ट रूप से, इमेज अपनी कॉपीज़ से
पूरे ब्लॉक को भर देगी, हालाँकि, इस बिहेवियर को
background-repeat प्रॉपर्टी की मदद से
बदला जा सकता है।
सिंटैक्स
सिलेक्टर {
background-image: url(इमेज का पथ);
}
सिलेक्टर {
background-image: none;
}
वैल्यूज़
| वैल्यू | विवरण |
|---|---|
url |
इमेज फ़ाइल का पथ। इमेज का नाम डबल कोट्स में, सिंगल कोट्स में, या बिना कोट्स के भी लिखा जा सकता है। |
none |
एलिमेंट के लिए बैकग्राउंड इमेज को रद्द करता है। |
डिफॉल्ट वैल्यू: none.
उदाहरण
background-image की मदद से बैकग्राउंड इमेज सेट करेंगे,
और background-repeat प्रॉपर्टी की मदद से इसके रिपीट होने पर रोक लगाएंगे:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 3px solid black;
}
:
उदाहरण
background-repeat के बिना, बैकग्राउंड इमेज
पूरे ब्लॉक को भर देगी:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 3px solid black;
}
:
उदाहरण
बैकग्राउंड इमेज के साथ-साथ बैकग्राउंड कलर भी
background-color की मदद से सेट किया जा सकता है।
इस स्थिति में, जहाँ बैकग्राउंड इमेज नहीं होगी
वहाँ बैकग्राउंड कलर दिखाई देगा:
<div id="elem"></div>
#elem {
background-color: orange;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 3px solid black;
}
:
यह भी देखें
-
backgroundप्रॉपर्टी,
जो बैकग्राउंड के लिए शॉर्टहैंड प्रॉपर्टी है
