CSS Background Image - CareerAlert

CSS Background Image का उपयोग किसी HTML element के पीछे image लगाने के लिए किया जाता है।
यह image text के पीछे दिखाई देती है और layout का important part होती है।

background-image Property

Background image लगाने के लिए background-image property का use किया जाता है।

body {
  background-image: url("bg.jpg");
}

Image Path कैसे लिखा जाता है?

Same Folder में Image

background-image: url("bg.jpg");

Images Folder के अंदर

background-image: url("images/bg.jpg");

Path सही न होने पर image show नहीं होगी।

Background Image Default Behavior

By default:

Image repeat होती है
Image top-left से start होती है

body {
  background-image: url("bg.jpg");
}

background-repeat

Image को repeat होने से रोकने के लिए:

body {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
}

Repeat options:

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

background-position

Image की position set करने के लिए:

body {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

Position values:

left
right
top
bottom
center

background-size

Image का size control करने के लिए:

cover

body {
  background-image: url("bg.jpg");
  background-size: cover;
}

Image पूरे area को fill कर देती है।

contain

body {
  background-image: url("bg.jpg");
  background-size: contain;
}

Image पूरी दिखाई देती है लेकिन खाली space रह सकता है।

Fixed Background Image

Scrolling पर background को fixed रखने के लिए:

body {
  background-image: url("bg.jpg");
  background-attachment: fixed;
}

Background Image on Specific Element

div {
  background-image: url("box-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}

Multiple Background Images

एक element में एक से ज्यादा images लगाई जा सकती हैं।

div {
  background-image: url("layer1.png"), url("layer2.jpg");
  background-position: left top, center;
  background-repeat: no-repeat, no-repeat;
}

Background Image और Text Readability

Image के ऊपर text readable रखने के लिए:

div {
  background-image: url("bg.jpg");
  background-color: rgba(0, 0, 0, 0.4);
}

background Shorthand with Image

body {
  background: url("bg.jpg") no-repeat center / cover;
}

Common Mistakes

Image Path गलत होना

सबसे common issue है wrong path.

background-size miss करना

बिना size set किए image stretch या repeat हो सकती है।

Best Practices

High resolution लेकिन optimized images use करें
Hero section के लिए background-size: cover best है
Important text के पीछे complex image avoid करें

Summary

background-image image लगाने के लिए use होती है
Default behavior में image repeat होती है
background-repeat, position, size से control मिलता है
Multiple background images possible हैं
Shorthand property code को clean बनाती है