CSS Background Size

background-size तय करता है कि कोई background image अपने element के relative कितनी बड़ी render होती है, एक exact pixel size से लेकर smart keywords तक जो image को fit या fill करने के लिए अपने आप scale कर देते हैं।

In this page:

Explicit Dimensions
cover Keyword
contain Keyword
Percentage Sizing
cover, contain, और Explicit Sizes के बीच चुनना

Syntax

css

selector {
  background-size: auto | cover | contain | width height;
}

Explicit Dimensions

background-size एक या दो length/percentage values accept करता है -- एक value width और height दोनों को बराबर set करती है (proportionally scaled, height auto), दो values width और height को independently set करती हैं, जो image के aspect ratio को distort कर सकती हैं अगर वे उसके natural proportions से match न करें।

Note:

Accepted values:
auto — natural image size (default)
cover — box को भरता है, crop हो सकता है
contain — अंदर fit होता है, gaps छूट सकते हैं
length — जैसे 200px या 200px 100px
percentage — background area के relative
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Explicit Dimensions

css

<style>
.box {
  background-image: url('https://placehold.co/100x100');
  background-size: 60px 40px;
  height: 100px;
}
</style>
<div class="box">Width and height set independently</div>

cover Keyword

background-size: cover image को उसके aspect ratio को बनाए रखते हुए scale करता है, जब तक वह element को पूरी तरह भरने के लिए काफ़ी बड़ी न हो जाए -- अगर element का aspect ratio image से अलग है तो image का कुछ हिस्सा crop हो सकता है, लेकिन कभी कोई खाली gap नहीं छूटेगा।

Note:

Accepted values:
auto — image का natural size (initial value)
cover — box भरने के लिए scale करता है, crop हो सकता है
contain — पूरी तरह अंदर fit होने के लिए scale करता है, gaps छूट सकते हैं
length — जैसे 200px या 10rem
percentage — background positioning area के relative
dो values — पहले width फिर height, जैसे 50% auto
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: The cover Keyword

css

<style>
.box {
  background-image: url('https://placehold.co/300x150');
  background-size: cover;
  height: 150px;
}
</style>
<div class="box">Fills completely, may crop</div>

contain Keyword

background-size: contain image को aspect ratio बनाए रखते हुए scale करता है, जब तक वह element के अंदर पूरी तरह fit होते हुए जितनी बड़ी हो सकती है उतनी बड़ी न हो जाए -- पूरी image हमेशा visible रहती है, लेकिन इससे खाली gaps छूट सकते हैं (background-color से भरे हुए) अगर aspect ratios match न करें।

Note:

Accepted values:
auto — image का natural size (initial value)
cover — box भरने के लिए scale करता है, crop हो सकता है
contain — पूरी तरह अंदर fit होने के लिए scale करता है, gaps छूट सकते हैं
length — जैसे 200px या 10rem
percentage — background positioning area के relative
dो values — पहले width फिर height, जैसे 50% auto
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: The contain Keyword

css

<style>
.box {
  background-image: url('https://placehold.co/300x150');
  background-size: contain;
  background-repeat: no-repeat;
  height: 150px;
  background-color: #eee;
}
</style>
<div class="box">Whole image visible, gaps possible</div>

Percentage Sizing

Percentage values background को element के अपने padding box dimensions के relative size करती हैं, image के natural size के relative नहीं -- background-size: 50% 50% image को element के area का एक चौथाई (आधी width, आधी height) occupy करवाता है।

Note:

Accepted values:
auto — image का natural size (initial value)
cover — box भरने के लिए scale करता है, crop हो सकता है
contain — पूरी तरह अंदर fit होने के लिए scale करता है, gaps छूट सकते हैं
length — जैसे 200px या 10rem
percentage — background positioning area के relative
dो values — पहले width फिर height, जैसे 50% auto
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Percentage Sizing

css

<style>
.box {
  background-image: url('https://placehold.co/300x150');
  background-size: 50% 50%;
  height: 150px;
}
</style>
<div class="box">Occupies a quarter of the element's area</div>

cover, contain, और Explicit Sizes के बीच चुनना

cover hero photos और full-bleed backgrounds के लिए सही है जहाँ cropping acceptable है; contain logos या product images के लिए सही है जहाँ कुछ भी कभी crop नहीं होना चाहिए; explicit pixel sizes fixed-size icons या patterns के लिए सही हैं जहाँ responsiveness से ज़्यादा predictable dimensions मायने रखते हैं।

उदाहरण: Choosing Between cover, contain, and Explicit Sizes

css

<style>
.hero {
  background-size: cover;
  background-image: url('https://placehold.co/300x100');
  height: 100px;
}
.logo {
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('https://placehold.co/300x100');
  height: 100px;
}
</style>
<div class="hero">Hero: cover</div>
<div class="logo">Logo: contain</div>

Live Example

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Multiple Backgrounds Next Lesson → CSS Background Origin

CSS Background Size

Explicit Dimensions

cover Keyword

contain Keyword

Percentage Sizing

cover, contain, और Explicit Sizes के बीच चुनना

Chapter Quiz — Complete all 21 topics to unlock

Login to run this code