background-image प्रॉपर्टी

background-image प्रॉपर्टी एलिमेंट की बैकग्राउंड इमेज सेट करती है। डिफॉल्ट रूप से, इमेज अपनी कॉपीज़ से पूरे ब्लॉक को भर देगी, हालाँकि, इस बिहेवियर को background-repeat प्रॉपर्टी की मदद से बदला जा सकता है।

सिंटैक्स

cssसिलेक्टर {
  background-image: url(इमेज का पथ);
}

cssसिलेक्टर {
  background-image: none;
}

वैल्यूज़

डिफॉल्ट वैल्यू: none.

उदाहरण

background-image की मदद से बैकग्राउंड इमेज सेट करेंगे, और background-repeat प्रॉपर्टी की मदद से इसके रिपीट होने पर रोक लगाएंगे:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

उदाहरण

background-repeat के बिना, बैकग्राउंड इमेज पूरे ब्लॉक को भर देगी:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

उदाहरण

बैकग्राउंड इमेज के साथ-साथ बैकग्राउंड कलर भी background-color की मदद से सेट किया जा सकता है। इस स्थिति में, जहाँ बैकग्राउंड इमेज नहीं होगी वहाँ बैकग्राउंड कलर दिखाई देगा:

html<div id="elem"></div>

css#elem {
  background-color: orange;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

यह भी देखें