CSS Backgrounds

Background किसी भी webpage की style और look का सबसे बड़ा हिस्सा होता है। आप चाहे plain color लगाना चाहें, image लगाना चाहें, gradient लगाना चाहें — सब कुछ CSS Background properties से किया जा सकता है। इस लेसन में हम step-by-step सीखेंगे कि CSS Background को कैसे customize किया जाता है

CSS Background क्या होता है?

CSS Background का मतलब है — किसी HTML element के पीछे का हिस्सा (background area) जहाँ आप color, image, gradient, या pattern लगा सकते हैं। उदाहरण

body {
  background-color: lightblue;
}

इससे पूरे webpage का background हल्का नीला हो जाएगा।

Background की Main Properties

Property	काम
background-color	बैकग्राउंड का रंग सेट करता है
background-image	कोई image लगाता है
background-repeat	image को दोहराता है या नहीं
background-position	image कहाँ दिखेगी
background-size	image का size सेट करता है
background-attachment	image scroll होगी या fixed रहेगी
background	shorthand (सभी properties एक साथ लिखने का तरीका)

background-color

इससे आप किसी element का background color सेट कर सकते हैं।

div {
  background-color: yellow;
}

आप color name, HEX, RGB या HSL कुछ भी use कर सकते हैं।

div {
  background-color: rgb(255, 200, 0);
}

background-image

अगर आप background में image लगाना चाहते हैं, तो इस property का use करें।

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

background-repeat

यह बताता है कि image repeat होनी चाहिए या नहीं।

Value	Meaning (अर्थ)
repeat	Default — X और Y दोनों direction में repeat होती है (Repeats in both X and Y directions, which is the default).
repeat-x	सिर्फ X-axis (horizontally) में (Only on the X-axis, horizontally).
repeat-y	सिर्फ Y-axis (vertically) में (Only on the Y-axis, vertically).
no-repeat	बिल्कुल repeat नहीं होगी (Will not repeat at all).

Example

body {
  background-image: url("pattern.png");
  background-repeat: no-repeat;
}

background-position

इससे आप image की position तय कर सकते हैं। जैसे image को top, bottom, center या left/right में लगाना।

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

Position दो values लेती है: पहली horizontal (left, center, right), दूसरी vertical (top, center, bottom)।

background-size

इससे image का size control किया जाता है।

Value	Effect
auto	Original size रहेगा
cover	पूरी screen को cover करेगा
contain	Image पूरी दिखेगी लेकिन space बच सकता है
Custom (pixels/%)	आप pixels या % भी दे सकते हैं

Example

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

cover option से image पूरी screen को सुंदर तरीके से भर देती है।

background-attachment

यह बताता है कि image scroll करेगी या स्थिर (fixed) रहेगी।

Value (मान)	Effect (प्रभाव)
scroll	image page के साथ scroll होगी (default)
fixed	image स्थिर रहेगी और content ऊपर नीचे चलेगा
local	image content के साथ move करेगी

Example

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

Fixed background एक parallax effect जैसा feel देता है

background (Shorthand Property)

अगर आप सबकुछ एक ही line में लिखना चाहते हैं तो shorthand property background use करें। Syntax

background: color image repeat position/size attachment;

Example

body {
  background: #000 url("stars.jpg") no-repeat center/cover fixed;
}

ऊपर वाले code में सब properties एक साथ लिखी गई हैं।

Multiple Backgrounds लगाना

आप चाहें तो एक element पर कई backgrounds भी लगा सकते हैं।

div {
  background-image: url("pattern.png"), url("flower.jpg");
  background-position: center, top right;
  background-repeat: no-repeat, repeat;
}

पहला background ऊपर रहेगा, दूसरा नीचे layer में।

Gradient as Background

Gradient एक smooth color transition देता है जो image जैसा दिखता है लेकिन lightweight होता है। Example

div {
  background: linear-gradient(to right, red, yellow);
}

आप radial gradient भी बना सकते हैं:

div {
  background: radial-gradient(circle, red, orange, yellow);
}

Tips for Better Backgrounds

हमेशा light text पर dark background या dark text पर light background रखें
Gradient या image का size compress रखें ताकि page fast लोड हो
Fixed background का use limited रखें, वरना mobile पर lag हो सकता है
Try tools:
https://cssgradient.io
https://uigradients.com

Quick Recap

CSS Background Properties (पृष्ठभूमि गुण)
Property (गुण)	Example (उदाहरण)	Description (विवरण)
background-color	`lightblue`	रंग सेट करता है
background-image	`url("bg.jpg")`	image लगाता है
background-repeat	`no-repeat`	repeat रोकता है
background-position	`center top`	image की position (स्थिति)
background-size	`cover`	image का size (आकार) control (नियंत्रण)
background-attachment	`fixed`	scroll या fixed (स्थिर) करता है
background	`shorthand`	सब एक साथ लिखना (सभी गुणों का संक्षिप्त रूप)

Final Thoughts

Background आपकी वेबसाइट का “मूड सेट” करता है। एक सही background user को आकर्षित करता है, और content को पढ़ना आसान बनाता है। Practice करते रहें और experiment करें