Backgrounds & Gradients

🎨 CSS Design Lesson 6 Beginner

Backgrounds transform flat rectangles into rich visual surfaces. CSS supports solid colors, images, linear gradients, radial gradients, and layered combinations of all of them.

1 Background Properties

CSS — Background Basics

.hero {
  background-color: #0f172a;

  /* Image */
  background-image: url('/hero-bg.jpg');
  background-size: cover;       /* fill the container   */
  background-position: center;  /* focus on center      */
  background-repeat: no-repeat;
  background-attachment: fixed; /* parallax scroll      */
}

2 Gradients

CSS — Gradient Types

/* Linear gradient — direction, color stops */
.banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Radial gradient — circular burst */
.glow {
  background: radial-gradient(circle at center, #7c3aed, #1e1b4b);
}

/* Conic gradient — color wheel sweep */
.wheel {
  background: conic-gradient(red, yellow, green, blue, red);
}

/* Multi-layer background */
.layered {
  background:
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
    url('/photo.jpg') center / cover no-repeat;
}

3 Code Challenge

Challenge: Build a hero section with a full-viewport height, a layered background combining a dark overlay gradient and a background image, and centered white text. Use background-size: cover and background-position: center.