Colors & Backgrounds in CSS

1. CSS Colors Kya Hain?

CSS colors ka use text, background, borders, aur other elements me color define karne ke liye use hota hai.

Aap color ko name, code, ya function ke through define kar sakte ho.

2. Color Define Karne Ke Methods

(a) Named Colors

CSS me around 147 predefined color names hote hain.

Example:

h1 {
  color: red;
}
p {
  color: navy;
}

Pros: Ye colors name easy to remember hote hai.

Cons: In colors ki range limited hoti hai, zyada variations nhi hote.

(b) Hex Colors

HEX code ek 6-digit value hoti hai jo # se start hoti hai.

Format: #RRGGBB

• RR = Red value (00 to FF)
• GG = Green value (00 to FF)
• BB = Blue value (00 to FF)

Note: '0-F' ye ek hex number system hota hai jisme 0-9 and then A for 11, B for 12, C for 13, D for 14, E for 15, and F for 16 values hoti hai.

Example:

h1 {
  color: #ff0000; /* Red */
}

Short HEX:

p {
  color: #0f0; /* Short for #00ff00 (Green) */
}

(c) RGB Colors

RGB ka matlab hai Red, Green, Blue. Values 0 se 255 ke beech hoti hain.

Example:

h1 {
  color: rgb(255, 0, 0); /* Red */
}

(d) RGBA Colors

RGBA ek RGB colors ka advanced version hota hai jo Alpha channel hota hai jo transparency control karta hai (0 = fully transparent, 1 = fully opaque).

Example:

p {
  color: rgba(0, 0, 255, 0.5); /* Semi-transparent Blue */
}

3. Opacity Property

opacity element ki transparency level ko control karti hai. Ye determine karti hai ki element kitna visible hona chahiye. Opecity ki range 0.0 to 1.0 tak hoti hai. Isme 0.0 means fully invisible and 1.0 means fully visible.

div {
  background-color: red;
  opacity: 0.5;
}

Note: Opacity element ke content ko bhi transparent bana deti hai.

4. Background Color

Background color wo color hota hai, jo webpage ke behind wale area ko fill karta hai.

body {
  background-color: lightblue;
}

5. Background Image

Backgroud image ke through ham background mein set kar sakte hai.

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

6. Background Repeat

Background Repeat property, ka use ham image ki repetation ko control karne ke liye karte hai.

body {
  background-repeat: repeat;     /* Default */
  background-repeat: no-repeat;  /* No repetition */
  background-repeat: repeat-x;   /* Only horizontal */
  background-repeat: repeat-y;   /* Only vertical */
}

7. Background Position

Ye property image ki position ko control karne ke liye use hoti hai.

body {
  background-position: center top;
}

Values: left, right, top, bottom, center or percentage/px values.

8. Background Size

Iska use image ke size ko control karne ke liye use hota hai.

body {
  background-size: cover;   /* Fill entire area */
  background-size: contain; /* Fit image without cropping */
}

9. Background Attachment

Background Attachment property ye determine karti hai ki kiya background image element ke sath scroll hona chahiye ya fixed rehna chahiye ?

body {
  background-attachment: scroll; /* Default */
  background-attachment: fixed;  /* Stays fixed */
}

Conclusion

CSS Colors aur Backgrounds se website ka first impression decide hota hain. Sahi color scheme aur background selection se aap apne design ko professional aur user-friendly bana sakte ho.