Module 1 · Getting Started · Lesson 5 of 5

CSS Backgrounds

Beginner ⏱ 20 min2 sections · 1 exercise · 4-question quiz

The background is a layered canvas: color at the bottom, then any number of images — including gradients — stacked with their own size, position and repeat. Learn the layers and half of "CSS magic" demystifies itself.

1. The background properties

CSS — the essentials

header {
  background-color: #20242A;                 /* bottom layer   */
  background-image: url("hero.jpg");
  background-size: cover;                    /* fill, crop edges */
  background-position: center;
  background-repeat: no-repeat;
}

cover scales the image to fill the box (cropping overflow); contain fits it entirely inside (possibly letterboxing). background-attachment: fixed pins the image while content scrolls — this very site's gradient canvas uses it.

2. Layering: commas stack backgrounds

CSS — overlay for readable text

hero {
  background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url("team.jpg") center / cover no-repeat;
}

The first layer paints on top. A translucent gradient over a photo is the standard recipe for readable hero text. Gradients count as images — which is why the whole Gradient generator family lives in this property.

💡 Small icons can skip the extra network request entirely: inline them as data URIs with the Base64 encoder.

3. Try it yourself

Make the hero readable: add a dark translucent gradient layer above the existing gradient "photo" (stack them with a comma) — try linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)) as the first layer.

exercise.html — editable

4. Quiz — check your understanding

CSS Backgrounds Quiz

4 questions · pass at 60%

Q1. background-size: cover will…

Fit the whole image inside, possibly leaving gapsFill the box completely, cropping overflowTile the imageStretch the image ignoring its ratio

cover guarantees full coverage of the box; whatever doesn't fit gets cropped.

Q2. How do you stack multiple backgrounds on one element?

Multiple background propertiesNested divs onlyComma-separate them in one declarationYou can't

Comma-separated layers stack top-to-bottom, first layer on top.

Q3. In a stacked background, which layer paints on top?

The last in the listThe first in the listThe brightestThe largest

The first background in the comma list renders above the others.

Q4. A CSS gradient is technically a…

ColorGenerated imageFilterBorder style

Gradients are images the browser generates — that's why they live in background-image.

🏆

Quiz passed? You're one step closer to your certificate.

Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.

Track my progress →

CSS Backgrounds

1. The background properties

2. Layering: commas stack backgrounds

3. Try it yourself

4. Quiz — check your understanding

CSS Backgrounds Quiz

Practice with these generators