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

background-position प्रॉपर्टी एलिमेंट की बैकग्राउंड इमेज की लोकेशन सेट करती है। लोकेशन को साइज की यूनिट्स की मदद से सेट किया जा सकता है। पहला वैल्यू लेफ्ट से ऑफसेट को दर्शाता है, दूसरा - टॉप से ऑफसेट को।

पोजीशन कीवर्ड्स से भी सेट की जा सकती है। इस स्थिति में वैल्यू का ऑर्डर मायने नहीं रखता। वर्टिकल के लिए कीवर्ड्स: top, center, bottom। होरिजॉन्टल के लिए कीवर्ड्स: left, center, right।

कीवर्ड्स का उपयोग कैसे करें

इमेज को कीवर्ड से पोजिशन करने के लिए, वर्टिकल के लिए एक वैल्यू और होरिजॉन्टल के लिए एक वैल्यू स्पेसिफाई करनी होगी। उदाहरण के लिए, अगर top right वैल्यू दी जाती है, तो इमेज टॉप राइट में पोजिशन हो जाएगी।

शब्दों का ऑर्डर मायने नहीं रखता: top right लिख सकते हैं, या right top लिख सकते हैं। अगर center कीवर्ड है - इसे छोड़ा जा सकता है। उदाहरण के लिए, top center और top एक समान हैं। और center center और center एक समान हैं।

सिंटैक्स

सिलेक्टर {
	background-position: दो वैल्यू स्पेस से सेपरेट;
}

उदाहरण

डिफॉल्ट रूप से बैकग्राउंड इमेज अपर लेफ्ट कॉर्नर में होगी:

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

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

उदाहरण

आइए बैकग्राउंड इमेज को अपर राइट कॉर्नर में पोजिशन करें:

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

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

उदाहरण

आइए बैकग्राउंड इमेज को लेफ्ट से 20px और टॉप से 40px की दूरी पर पोजिशन करें:

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

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

उदाहरण

आइए बैकग्राउंड इमेज को लेफ्ट से 90% और टॉप से 100% की दूरी पर पोजिशन करें:

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

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

उदाहरण

आइए बैकग्राउंड इमेज को लेफ्ट से 30px और वर्टिकल बॉटम में पोजिशन करें:

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

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

उदाहरण

आइए बैकग्राउंड इमेज को लेफ्ट से 30px और वर्टिकल सेंटर में पोजिशन करें:

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

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

उदाहरण

आइए बैकग्राउंड इमेज को टॉप से 30px और होरिजॉन्टल सेंटर में पोजिशन करें:

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

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

यह भी देखें

background प्रॉपर्टी,
जो बैकग्राउंड के लिए शॉर्टहैंड प्रॉपर्टी है