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

background-size प्रॉपर्टी बैकग्राउंड इमेज का आकार निर्धारित करती है। प्रॉपर्टी के मान के रूप में कोई भी आकार की इकाइयाँ, या कीवर्ड auto, cover या contain हो सकते हैं।

सिंटैक्स

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

कीवर्ड

मान	विवरण
`auto`	बैकग्राउंड का प्राकृतिक आकार होगा, जैसा कि बैकग्राउंड इमेज का वास्तविक आकार होता है। यदि `auto` केवल एक साइड के लिए दिया गया है, तो उस साइड के अनुसार बैकग्राउंड को इस तरह स्केल किया जाएगा, ताकि उसके अनुपात विकृत न हों।
`cover`	इमेज को इस तरह स्केल करता है कि वह पूरे ब्लॉक को ढक ले और अनुपात संरक्षित रहें। इमेज पूरी तरह से फिट होने की कोशिश करेगी, लेकिन यह हमेशा संभव नहीं होता, इसलिए इसका कुछ हिस्सा कट जाएगा। ब्लॉक हमेशा इमेज से पूरी तरह ढका रहेगा।
`contain`	इमेज को इस तरह स्केल करता है कि वह ब्लॉक में पूरी तरह से फिट हो जाए और अनुपात संरक्षित रहें। ऐसा करते समय यह या तो पूरी चौड़ाई, या पूरी ऊँचाई घेर सकती है (यह इमेज के अनुपात और एलिमेंट के आकार पर निर्भर करता है)। ब्लॉक आम तौर पर इमेज से पूरी तरह नहीं ढका होगा (लेकिन इमेज हमेशा पूरी दिखाई देगी, हालांकि छोटे रूप में)।

डिफॉल्ट मान: auto।

उपयोग

आकार की इकाइयाँ और auto विभिन्न संयोजनों में उपयोग की जा सकती हैं, उदाहरण के लिए, इस तरह: auto 20px, या 30% 20px, या auto 30% इत्यादि। इस स्थिति में पहला पैरामीटर चौड़ाई के अनुसार बैकग्राउंड का आकार निर्धारित करता है, और दूसरा पैरामीटर - ऊँचाई के अनुसार बैकग्राउंड का आकार निर्धारित करता है। यदि एक पैरामीटर निर्दिष्ट है - तो वह बैकग्राउंड का आकार चौड़ाई और ऊँचाई दोनों के अनुसार एक साथ निर्धारित करेगा।

उदाहरण

अभी बैकग्राउंड इमेज का अपना प्राकृतिक आकार होगा:

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

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

उदाहरण

अभी बैकग्राउंड इमेज का आकार 300px बाय 400px होगा (हमारे मामले में इमेज का अनुपात विकृत हो जाएगा):

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

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

उदाहरण

अभी बैकग्राउंड इमेज का आकार 400px बाय 400px होगा (हमारे मामले में इमेज का अनुपात विकृत हो जाएगा):

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

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

उदाहरण

अभी बैकग्राउंड इमेज का आकार क्षैतिज रूप से 400px होगा, और लंबवत रूप से इसका आकार अपने आप समायोजित हो जाएगा ताकि अनुपात विकृत न हों:

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

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

उदाहरण

अभी बैकग्राउंड इमेज का आकार लंबवत रूप से 400px होगा, और क्षैतिज रूप से इसका आकार अपने आप समायोजित हो जाएगा ताकि अनुपात विकृत न हों:

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

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

उदाहरण . contain मान

contain मान के काम को देखें:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

उदाहरण . cover मान

cover मान के काम को देखें:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

उदाहरण . cover के काम को बेहतर बनाना

cover मान के काम को बेहतर बनाया जा सकता है, यदि background-position प्रॉपर्टी की मदद से इमेज को सेंटर में लगाया जाए (हमारे मामले में दिखने वाले हिस्सों में घोड़ों की पूँछ की बजाय उनके सिर दिखाई देंगे):

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

यह भी देखें

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