Backgrounds

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Be able to control background color/image

A background isn't just a single color — you can also control it with images, gradients, position, size, and more. Landing page hero sections often use gradient backgrounds, while card UIs often use subtle background colors to keep things easy to read. When using a background image, consider adding an overlay or opacity so the text stays readable and doesn't get lost in the clutter.

css

.hero {
  min-height: 420px;
  background-color: #101827;
  background-image: linear-gradient(135deg, #101827, #123b52);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

You should see

A dark blue gradient background will appear on the hero section, covering the whole section neatly.

Warning

If a background image is too large, it can slow down page load. Using a WebP or otherwise optimized image is a better choice.