CSS

CSS backgrounds are essential for styling web pages. This guide covers all background properties in CSS, including colors, images, gradients, and advanced techniques.

---

1️⃣ CSS Background Color

The background-color property sets the background color of an element.

Example:

body {
    background-color: lightgray;
}

📌 You can use:

• Named colors (red, blue, gray, etc.)
• HEX colors (#ff5733)
• RGB (rgb(255, 0, 0))
• HSL (hsl(240, 100%, 50%))

---

2️⃣ CSS Background Image

The background-image property sets an image as the background.

Example:

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

🔹 The image will repeat by default. Use background-repeat: no-repeat; to stop repetition.

---

3️⃣ CSS Background Repeat

By default, background images repeat both horizontally and vertically.

Stopping Repeat:

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

🔹 Other values:

• repeat-x → Repeats horizontally
• repeat-y → Repeats vertically

---

4️⃣ CSS Background Position

The background-position property defines the position of the background image.

Example:

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

📌 Values:

• left top
• center center
• right bottom
• 50% 50% (x% y%)
• px values (100px 50px)

---

5️⃣ CSS Background Size

The background-size property adjusts the image size.

Example:

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

📌 Values:

• cover → Fills the entire container, cropping if necessary
• contain → Fits the image inside without cropping
• auto → Keeps the original size
• Custom (200px 100px or 50% 50%)

---

6️⃣ CSS Background Attachment

The background-attachment property controls whether the background scrolls with the page.

Example:

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

📌 Values:

• scroll → Moves with the page
• fixed → Stays in place when scrolling
• local → Moves when the element’s content scrolls

---

7️⃣ CSS Multiple Backgrounds

You can set multiple background images.

Example:

body {
    background-image: url("image1.png"), url("image2.jpg");
    background-position: center, top right;
    background-size: cover, 100px 100px;
}

📌 Each image is separated by a comma (,)

---

8️⃣ CSS Background Gradient

Gradients create smooth color transitions.

Linear Gradient:

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

📌 Directions:

• to right → Left to right
• to bottom → Top to bottom
• to left → Right to left
• to top → Bottom to top

Radial Gradient:

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

📌 Creates a circular gradient.

---

9️⃣ CSS Background Shorthand

You can combine multiple background properties using shorthand.

Example:

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

📌 Shorthand order:
background: color image repeat position/size attachment;

---

🎯 Conclusion

✅ background-color → Adds solid colors
✅ background-image → Sets images
✅ background-size → Controls size
✅ background-position → Adjusts alignment
✅ background-attachment → Fixed or scroll
✅ background-gradient → Adds smooth color transitions