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

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

सिंटैक्स

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

कीवर्ड

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

उपयोग

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

उदाहरण

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

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

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

Результат:

उदाहरण

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

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

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

Результат:

उदाहरण

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

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

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

Результат:

उदाहरण

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

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

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

Результат:

उदाहरण

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

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

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

Результат:

उदाहरण . contain मान

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

html<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>

css.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 मान के काम को देखें:

html<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>

css.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 प्रॉपर्टी की मदद से इमेज को सेंटर में लगाया जाए (हमारे मामले में दिखने वाले हिस्सों में घोड़ों की पूँछ की बजाय उनके सिर दिखाई देंगे):

html<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>

css.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;
}

Результат:

यह भी देखें