Backgrounds & Borders
Backgrounds
background-color, image, position
💡 Background properties ek wallpaper lagane jaisa hai — kya wallpaper (image/color), kaha se start hoga (position), repeat hoga ya nahi (repeat), poori deewar cover karega ya nahi (size) — sab customize kar sakte ho.
background-color solid color. background-image ek image (url()) ya gradient. background-repeat control karta hai image repeat (tile) hogi ya nahi (repeat, no-repeat, repeat-x, repeat-y). background-position image ki starting position. background-size (cover — poora area fill, crop ho sakta hai; contain — poori image dikhe, letterbox ho sakta hai).
.hero {
background-image: url('hero.jpg');
background-size: cover; /* poora area fill, aspect ratio maintain */
background-position: center; /* image center se crop */
background-repeat: no-repeat;
}
.pattern {
background-image: url('pattern.png');
background-repeat: repeat; /* tile jaisa repeat */
}🖼️
Background properties ek wallpaper lagane jaisa hai — kya wallpaper (image/color), kaha se start hoga (position), repeat hoga ya nahi (repeat), poori deewar cover karega ya nahi (size) — sab customize kar sakte ho.
1 / 6
⚡ झट से Recap
- background-image = url() ya gradient
- background-size: cover (fill, crop) vs contain (poora dikhe)
- background-position = starting point (center, top, etc.)
इस page में (2 subtopics)
Ek element par MULTIPLE background images layer kar sakte ho (comma-separated) — pehla wala sabse UPAR (front) dikhta hai, baaki niche stack hote hain. Textures, patterns combine karne ke liye useful.
.layered {
background-image:
url('overlay-pattern.png'),
url('main-photo.jpg');
background-size: auto, cover;
background-repeat: repeat, no-repeat;
}
/* overlay-pattern.png upar dikhega, main-photo.jpg niche */Tip: Multiple backgrounds combine karte waqt, har property (size, position, repeat) ko bhi comma-separated list ke roop mein match karna zaroori hai — har image ka apna corresponding setting.
background-attachment: fixed background ko VIEWPORT ke relative fix kar deta hai (content scroll hota hai, background nahi) — ek simple "parallax" jaisa effect create karta hai, bina JavaScript ke.
.parallax-section {
background-image: url('mountains.jpg');
background-attachment: fixed;
background-size: cover;
height: 400px;
}
/* Scroll karte waqt, image apni jagah "fixed" rehti hai,
content uske upar se scroll hota hai */Tip: background-attachment: fixed mobile devices par kabhi-kabhi performance issues deta hai (aur iOS Safari mein historically buggy raha hai) — modern alternative CSS transform-based parallax libraries hain agar cross-device consistency chahiye.