CSS Backgrounds

Backgrounds वो सबसे visible चीज़ों में से एक हैं जिन्हें CSS control करता है: वह color या image जो किसी element के content के पीछे बैठी होती है। एक simple background-color किसी section का mood पूरी तरह बदल सकता है, और एक background-image एक plain box को banner या hero section में बदल सकता है। CSS background images पर भी fine control देता है: वे repeat होती हैं या नहीं, कहाँ position की गई हैं, और कितनी बड़ी display होती हैं। एक background shorthand property भी है जो आपको इनमें से कई चीज़ें एक साथ, एक ही line में set करने देती है। cookiescursor.com जैसी किसी असली site पर backgrounds लगातार दिखती हैं, subtle card backgrounds से लेकर full-width promotional banners तक।

In this page:

background-color
background-image
background-repeat और background-position
background-size
Shorthand background Property

Syntax

css

selector {
  background-color: color;
  background-image: url("image.jpg");
  background-repeat: repeat | no-repeat;
}

background-color

background-color property किसी element के content के पीछे की जगह को एक solid color से भरती है, CSS के support किए गए किसी भी color format का इस्तेमाल करके। यह सबसे ज़्यादा इस्तेमाल होने वाली CSS properties में से एक है, जो किसी भी background image के नीचे base layer बनाती है।

Note:

एक subtle, light background-color किसी page के एक section को दूसरे से visually अलग करने का एक आसान तरीका है।
Accepted values:
color — कोई भी CSS color: name, hex, rgb(), hsl()
transparent — कोई color नहीं (initial value)
currentcolor — element की text color
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: उसके ऊपर बैठे text के मुकाबले खराब contrast वाला background-color उस content को पढ़ने में मुश्किल बना सकता है।

उदाहरण: background-color

css

<style>
.box {
  background-color: lightblue;
}
</style>
<div class="box">Filled with a solid background color</div>

background-image

background-image property किसी element के content के पीछे एक image रखती है, जिसे url() से reference किया जाता है। इसे background-color के साथ combine किया जा सकता है ताकि image load होने तक एक fallback मिले।

Note:

हमेशा अपनी image के dominant color के करीब एक background-color set करें, ताकि image load न होने पर भी layout ठीक-ठाक दिखे।
Accepted values:
url("...") — एक image file
none — कोई image नहीं (initial value)
linear-gradient() — एक straight-line color gradient
radial-gradient() — एक circular या elliptical gradient
conic-gradient() — किसी center point के चारों ओर sweep होने वाला gradient
commas से अलग की गई कई values — stacked layers
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: बिना repeat या size settings वाली background-image unpredictable तरीके से behave कर सकती है, tile या clip हो सकती है ऐसे तरीकों से जिनकी आपको उम्मीद नहीं थी।

उदाहरण: background-image

css

<style>
.box {
  background-color: #ddd;
  background-image: url('https://placehold.co/300x150');
}
</style>
<div class="box">Image with a fallback color behind it</div>

background-repeat और background-position

Default रूप से, एक background image अपने element को भरने के लिए tile होती है। background-repeat control करती है कि वह tile हो भी या नहीं, और background-position control करती है कि image ठीक कहाँ से शुरू हो। इन दो properties को गलत करना किसी background image के stretched, cut off, या misaligned दिखने का एक आम कारण है।

Note:

जब भी आपको tiled pattern के बजाय एक single, साफ़ image चाहिए हो तो background-repeat: no-repeat set करें।
Accepted values:
repeat | no-repeat | repeat-x | repeat-y | space | round — background-repeat के लिए tiling
left / center / right — horizontal position keywords
top / center / bottom — vertical position keywords
length — top-left से offset, जैसे 20px 10px
percentage — 50% 50% image को center करता है
edge offsets — जैसे right 10px bottom 20px
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: center जैसी positioning values तभी visually मतलब रखती हैं जब repeat बंद हो; वरना tiling positioning के effect को पूरी तरह छुपा सकती है।

उदाहरण: background-repeat and background-position

css

<style>
.box {
  background-image: url('https://placehold.co/50x50');
  background-repeat: no-repeat;
  background-position: center;
  height: 150px;
}
</style>
<div class="box">Single centered image, no tiling</div>

background-size

background-size control करती है कि एक background image कितनी बड़ी render होती है। cover जैसे special keywords image को उसके element को पूरी तरह भरने के लिए scale करते हैं, जबकि contain उसे बिना crop किए पूरी तरह अंदर fit करने के लिए scale करता है।

Note:

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

Warning: background-size: cover किसी image के हिस्सों को fit कराने के लिए crop कर सकता है, इसलिए double check करें कि ज़रूरी content गलती से कट तो नहीं गया।

उदाहरण: background-size

css

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

Shorthand background Property

background shorthand property आपको color, image, repeat, position, और size एक साथ एक ही declaration में set करने देती है, पाँच अलग properties लिखने के बजाय। Shorthand इस्तेमाल करना गलती से उन properties को reset कर सकता है जिन्हें आपने explicitly शामिल नहीं किया, इसलिए पूरी value list double-check करना ठीक रहता है।

Note:

एक बार जब आप individual background properties में सहज हो जाएँ, तो shorthand version आपकी CSS को बिना clarity खोए छोटा रखता है।
Accepted values:
color — जैसे #eee
image — url() या एक gradient
position / size — जैसे center / cover
repeat — जैसे no-repeat
attachment — scroll, fixed या local
origin और clip — border-box, padding-box या content-box
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: shorthand में छोड़ी गई कोई भी property अपनी default value पर reset हो जाती है, जो कहीं और की गई कोई setting गलती से undo कर सकती है।

उदाहरण: Shorthand background Property

css

<style>
.box {
  background: #ddd url('https://placehold.co/300x150') no-repeat center / cover;
  height: 150px;
}
</style>
<div class="box">Five properties in one declaration</div>

Live Example

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Color Keywords Next Lesson → CSS Background Color

CSS Backgrounds

background-color

background-image

background-repeat और background-position

background-size

Shorthand background Property

Chapter Quiz — Complete all 21 topics to unlock

Login to run this code