CSS Background Properties

CSS में Background Properties का use किसी HTML element के background (पृष्ठभूमि) को style और design करने के लिए किया जाता है।

इन properties की मदद से हम किसी element का background color, background image, image की repetition, scrolling behavior और position control कर सकते हैं।

CSS की मुख्य 5 Background Properties हैं:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

---

1. background-color

background-color property का use किसी HTML element के background का color set करने के लिए किया जाता है।

यह property किसी भी element जैसे body, div, h1, p आदि पर apply की जा सकती है।

Syntax:

selector {
    background-color: color;
}

Example:

<html>
<head>
<title>Background Color</title>

<style>
body {
    background-color: orange;
}

h1 {
    background-color: blue;
}
</style>

</head>

<body>
<h1>Heading 1</h1>
<p>Paragraph</p>
</body>
</html>

Explanation:

• body का background orange हो जाएगा।
• h1 element का background blue हो जाएगा।
• background-color में हम color name, HEX value, RGB, RGBA आदि का use कर सकते हैं।

Example:

background-color: red;
background-color: #ff0000;
background-color: rgb(255, 0, 0);

---

2. background-image

background-image property का use किसी element के background में image लगाने के लिए किया जाता है।

Image को specify करने के लिए url() function का use किया जाता है।

Syntax:

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

Example:

<html>
<head>
<title>Background Image</title>

<style>
body {
    background-image: url('abc.jpg');
}
</style>

</head>

<body>
<h1>Heading 1</h1>
<p>Paragraph</p>
</body>
</html>

Explanation:

यहाँ abc.jpg image को body के background के रूप में set किया गया है।

background-image: url('abc.jpg');

Note: Background image element के content के पीछे दिखाई देती है। इसका actual size और display behavior background-size, background-repeat, background-position जैसी properties से भी control किया जा सकता है।

---

3. background-repeat

जब हम किसी element में background image लगाते हैं, तो image by default horizontal (X-axis) और vertical (Y-axis) दोनों directions में repeat होती है।

background-repeat property का use यह control करने के लिए किया जाता है कि background image repeat होगी या नहीं और किस direction में repeat होगी।

Main Values:

Value	Meaning
no-repeat	Image केवल एक बार दिखाई देगी और repeat नहीं होगी।
repeat-x	Image केवल horizontally यानी X-axis पर repeat होगी।
repeat-y	Image केवल vertically यानी Y-axis पर repeat होगी।
repeat	Image horizontal और vertical दोनों directions में repeat होगी। यह default value है।

Example:

<html>
<head>
<title>Background Repeat</title>

<style>
body {
    background-image: url('abc.jpg');
    background-repeat: no-repeat;
}
</style>

</head>

<body>
<h1>Heading 1</h1>
<p>Paragraph</p>
</body>
</html>

Explanation:

background-repeat: no-repeat;

का मतलब है कि abc.jpg image सिर्फ एक बार दिखाई देगी, बार-बार repeat नहीं होगी।

---

4. background-attachment

background-attachment property यह decide करती है कि background image page को scroll करने पर move करेगी या fixed रहेगी।

Main Values:

Value	Meaning
scroll	Page scroll करने पर background image भी scroll होगी। यह default value है।
fixed	Page scroll करने पर background image अपनी जगह fixed रहेगी।

Example:

<html>
<head>
<title>Background Attachment</title>

<style>
body {
    background-image: url('abc.jpg');
    background-attachment: fixed;
}
</style>

</head>

<body>
<h1>Heading 1</h1>
<p>Paragraph</p>
</body>
</html>

Explanation:

background-attachment: fixed;

का मतलब है कि जब user page को scroll करेगा, तब background image अपनी position पर fixed रहेगी।

यह effect अक्सर websites में background visual effects के लिए use किया जाता है।

---

5. background-position

background-position property का use background image की position/location तय करने के लिए किया जाता है।

इसकी मदद से हम image को left, right, top, bottom या center में place कर सकते हैं।

Common Position Values:

• left
• right
• top
• bottom
• center
• left top
• left bottom
• right top
• right bottom
• center top
• center bottom

Example:

<html>
<head>
<title>Background Position</title>

<style>
body {
    background-image: url('abc.jpg');
    background-repeat: no-repeat;
    background-position: center;
}
</style>

</head>

<body>
<h1>Heading 1</h1>
<p>Paragraph</p>
</body>
</html>

Explanation:

background-position: center;

का मतलब है कि background image को element के center में रखा जाएगा।

हम image को अलग-अलग positions पर भी रख सकते हैं:

background-position: left top;
background-position: right top;
background-position: center;
background-position: left bottom;
background-position: right bottom;

---

Quick Revision

Property	काम
background-color	Background का color set करती है।
background-image	Background में image set करती है।
background-repeat	Image repeat होगी या नहीं यह control करती है।
background-attachment	Image scroll करेगी या fixed रहेगी यह control करती है।
background-position	Background image की position set करती है।

याद रखने की आसान Trick

Color → Image → Repeat → Attachment → Position

यानी पहले background का Color, फिर Image, उसकी Repeat, उसका Attachment और finally उसकी Position को control किया जा सकता है।