background-position-x गुण

background-position-x गुण किसी तत्व की पृष्ठभूमि छवि की क्षैतिज स्थिति निर्धारित करता है।

गुण निम्नलिखित मान ले सकता है: left, center, right, और साथ ही पृष्ठभूमि की स्थिति प्रतिशत या पिक्सेल में भी निर्दिष्ट की जा सकती है।

सिंटैक्स

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

उदाहरण

आइए पृष्ठभूमि छवि को क्षैतिज रूप से बाईं ओर रखें:

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

css#elem {
  background-position-x: left;
  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-x: right;
  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-x: 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-x: 20%;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

यह भी देखें