LESSON 7

Backgrounds

Learning objective: Style element backgrounds with color and images.

Understand

Backgrounds set the surface behind your content.

background-color fills an element, while background-image places an image. Related properties like background-size, background-position, and background-repeat control how an image fits. The background shorthand can set several at once.

Analogy: A background is like the wallpaper behind furniture in a room.

See It in Action

A color and a cover image:

header {
  background-color: #111;
  background-image: url(hero.jpg);
  background-size: cover;
}
How it works: The color shows if the image is missing; background-size: cover scales the image to fill the header without distortion.

Try It Yourself

  1. Give a section a background color.
  2. Add a background image and set cover.
  3. Try background-position: center.

Quick Quiz

What does background-size: cover do?

Challenge

Design a hero section with a background image that covers it fully.

Success condition: Your hero fills its area with a covering background image.