background-position-y प्रॉपर्टी

background-position-y प्रॉपर्टी किसी एलिमेंट की बैकग्राउंड इमेज की ऊर्ध्वाधर स्थिति निर्धारित करती है।

यह प्रॉपर्टी निम्नलिखित मान ले सकती है: top, center, bottom, और साथ ही प्रतिशत या पिक्सेल में बैकग्राउंड की स्थिति भी निर्दिष्ट की जा सकती है।

सिंटैक्स

cssसिलेक्टर {
  background-position-y: मान;
}

उदाहरण

आइए बैकग्राउंड इमेज को ऊर्ध्वाधर में शीर्ष पर रखें:

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

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

Результат:

उदाहरण

और अब बैकग्राउंड को केंद्र में ले जाएं:

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

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

Результат:

उदाहरण

और अब प्रतिशत में बैकग्राउंड की स्थिति निर्दिष्ट करें:

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

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

Результат:

यह भी देखें