background-position-x गुण
background-position-x गुण
किसी तत्व की पृष्ठभूमि छवि की
क्षैतिज स्थिति निर्धारित करता है।
गुण निम्नलिखित मान ले सकता है:
left, center, right, और साथ ही
पृष्ठभूमि की स्थिति प्रतिशत या पिक्सेल में
भी निर्दिष्ट की जा सकती है।
सिंटैक्स
सेलेक्टर {
background-position-x: मान;
}
उदाहरण
आइए पृष्ठभूमि छवि को क्षैतिज रूप से बाईं ओर रखें:
<div id="elem"></div>
#elem {
background-position-x: left;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
उदाहरण
और अब पृष्ठभूमि को दाईं ओर ले जाएं:
<div id="elem"></div>
#elem {
background-position-x: right;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
उदाहरण
आइए पृष्ठभूमि छवि को केंद्र में रखें:
<div id="elem"></div>
#elem {
background-position-x: center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
उदाहरण
और अब पृष्ठभूमि के लिए स्थिति प्रतिशत में निर्दिष्ट करें:
<div id="elem"></div>
#elem {
background-position-x: 20%;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
यह भी देखें
-
backgroundगुण,
जो पृष्ठभूमि के लिए एक शॉर्टहैंड गुण है -
background-position-yगुण,
जो पृष्ठभूमि की ऊर्ध्वाधर स्थिति निर्धारित करता है
