Backgrounds

Every element's background can hold a colour, one or more images, or gradients — positioned, sized, repeated and clipped exactly as you like. Backgrounds are how hero sections, patterns, overlays and decorative textures are built.

Background colour and image

The colour shows while the image loads and anywhere the image doesn't cover — choose one that keeps the text readable either way.

background-size

cover scales the image to fill the entire box, cropping the overflow — the usual choice for hero images.
contain scales it to fit entirely inside the box.
A length or percentage sets an exact size; auto keeps the aspect ratio.

background-repeat and position

Repeat values: repeat (default), no-repeat, repeat-x, repeat-y, space, round. Position takes keywords (center, top right), lengths, percentages, or edge offsets like right 10px bottom 10px.

The background shorthand

CSS shorthand.css

.hero {
  /* color, image, position / size, repeat */
  background: #10131c url("hero.jpg") center / cover no-repeat;
}

The shorthand resets any part you leave out. A common gotcha: writing background: red after setting background-image removes the image.

Multiple backgrounds and overlays

Comma-separated backgrounds stack, with the first one on top. A semi-transparent gradient over a photo is the standard way to keep overlaid text readable.

background-attachment, origin and clip

background-clip: text fills only the text shape — the classic gradient-text effect.
background-clip/background-origin control whether the background extends under the border, the padding, or only the content.
background-attachment: fixed keeps the image still while the page scrolls (it's ignored by many mobile browsers).

Background images vs <img>

Use CSS backgrounds for decoration. If an image is content — something a screen-reader user should know about — use an <img> with alt text instead. Background images also can't use srcset, though image-set() provides a similar choice of resolutions:

CSS image-set.css

.hero {
  background-image: image-set(
    url("hero.avif") type("image/avif"),
    url("hero.jpg") type("image/jpeg")
  );
}

Try it yourself

PreviousColours NextGradients