….

🎨 CSS Backgrounds

Design Beautiful Web Experiences with GoNimbus

CSS gives you powerful tools to style your websites with eye-catching backgrounds. With just a few properties, you can apply solid colors, images, positions, and even transparency to elements.

In this module, we’ll explore the essential CSS background properties and how to use them effectively.

---

📚 What You’ll Learn

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (shorthand)

---

🌈 1. background-color

This property sets the background color of an element.

✅ Example: Set Background for the Page

body {
  background-color: lightblue;
}

🖍️ You can use:

• Named colors: red, green, blue
• HEX values: #ff0000
• RGB values: rgb(255, 0, 0)

✅ Example: Style Specific Elements

h1 {
  background-color: green;
}

p {
  background-color: yellow;
}

div {
  background-color: lightblue;
}

---

🌐 2. background-image

Use this to add an image as a background.

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

💡 Tip: Use high-quality images and optimized formats (like .webp) for faster loading.

---

🔁 3. background-repeat

By default, background images repeat. Use this property to control repetition.

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

Options:

• repeat (default)
• no-repeat
• repeat-x
• repeat-y

---

📌 4. background-attachment

Defines whether the background scrolls with the content or stays fixed.

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

Values:

• scroll (default)
• fixed
• local

---

📍 5. background-position

Sets the starting position of a background image.

body {
  background-image: url("logo.png");
  background-position: center top;
}

Options:

• Top, center, bottom
• Left, center, right
• X% Y% or pixel values like 50px 100px

---

🧰 6. background (Shorthand Property)

You can combine all the background properties into a single line:

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

---

💧 Opacity & Transparency

Use opacity to control the transparency of elements.

div {
  background-color: green;
  opacity: 0.3; /* 30% visible */
}

⚠️ Note: This affects both background and text inside the element.

---

🎯 Transparency with rgba()

To keep text fully visible while applying transparent backgrounds, use rgba() values.

div {
  background: rgba(0, 128, 0, 0.3); /* Green with 30% opacity */
}

RGBA format:

rgba(red, green, blue, alpha)

• Alpha ranges from 0.0 (transparent) to 1.0 (opaque)

---

✅ Summary Table

Property	Description
background-color	Sets solid color background
background-image	Adds image as background
background-repeat	Defines repeat behavior for background
background-attachment	Fixes or scrolls background image
background-position	Sets background image position
background	Shorthand for all background properties
opacity	Adjusts element and background transparency
rgba()	Transparent color without affecting text

---

🚀 Start Designing with Confidence

With GoNimbus, you don’t just learn CSS—you create. Master these background properties and build visually stunning websites with just a few lines of code.

---