CSS backgrounds: colours, gradients and images layered

A CSS background is a stack of layers on one element. The background property accepts a comma separated list of images and gradients, painted with the first one on top, plus a single colour at the very bottom. That is all you need for a tinted hero photo, a soft light over a gradient or a texture over a brand colour, without extra elements or wrappers. The rest is knowing how the shorthand reads its values.

The background shorthand, value by value

The shorthand sets up to eight longhand properties at once. Any you leave out are reset to their defaults, which is the most common source of "why did my background size disappear" bugs.

.hero {
  /* image | position / size | repeat | colour */
  background: url("harbour.webp") center 30% / cover no-repeat #0f172a;
}

How background layers stack

List layers from top to bottom, separated by commas. Each layer can have its own position, size and repeat, given in the same order in each longhand. Only the final layer may include a colour. Think of it as reading down through a pile of tracing paper.

.section {
  background:
    radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, #38bdf8 0%, transparent 50%),
    linear-gradient(160deg, #1e1b4b 0%, #0f0b1e 100%)
    #0f0b1e;
}

Use transparent in the outer stops so lights blend into whatever is below. For the shapes themselves, see CSS radial gradient and CSS mesh gradient.

A gradient over a background image

The most useful layered background tints a photo so words on top can be read. Put a gradient layer first and the image second. A gradient that is dark where the text sits and clear elsewhere keeps far more of the photo than a flat dark overlay.

.hero {
  background:
    linear-gradient(90deg, rgb(10 12 24 / 0.85) 0%, rgb(10 12 24 / 0.4) 45%, transparent 70%),
    url("terrace.webp") center / cover no-repeat
    #0a0c18;
  color: #f8fafc;
}

Gradient overlay has more overlay recipes, and text over image covers when to move the words instead of darkening the picture.

background-size, position and repeat

• cover fills the box and crops whatever overflows. Right for photos and full bleed heroes.
• contain fits the whole image inside and leaves gaps. Right for logos and illustrations that must not be cropped.
• Pair cover with a deliberate background-position such as 50% 30% so the crop keeps the subject's face or the product in view.
• Texture tiles want repeat and a fixed size, for example 200px 200px, so the grain stays the same at every screen width.
• background-attachment: fixed creates a parallax look on desktop, but many mobile browsers ignore it, so never depend on it.

.card {
  background:
    url("grain.png") 0 0 / 200px 200px repeat,
    linear-gradient(135deg, #7c2d12 0%, #ea580c 55%, #fdba74 100%);
}

One more longhand earns its place: background-clip: text cuts the background to the shape of the letters, which is how gradient lettering is made in CSS. Keep it for large display words, set a solid color fallback, and see CSS gradient text for the full pattern.

Mistakes to avoid

Responsive and fast background images

image-set() lets the browser choose between formats or resolutions, much like srcset on an img. And because background images are only discovered once the CSS is parsed, a hero background can arrive late; a preload hint in the head fixes that.

<link rel="preload" as="image" href="/hero-1920.avif" type="image/avif" fetchpriority="high">

<style>
  .hero {
    background: image-set(
      url("/hero-1920.avif") type("image/avif"),
      url("/hero-1920.webp") type("image/webp"),
      url("/hero-1920.jpg") type("image/jpeg")
    ) center / cover no-repeat #0f172a;
  }
</style>

Often the fastest background is no image at all. Layered gradients cost no download, and a tiny grain tile adds texture for a few kilobytes. CSS gradient performance and WebP vs PNG and JPG cover the trade offs. If you would rather not hand tune light and grain, a Gradiently Mark gives you a finished, distinctive background at the 1920×1080 website hero size, with the same look as your social posts.