Using Multiple Background Images in CSS

Cascading Style Sheets (CSS) allows developers to apply multiple background images to a single HTML element by listing comma-separated image URLs within the background-image property. CSS renders these images as a visual stack, placing the first declared image closest to the viewer on the top layer, followed by each subsequent image underneath it, and the background color at the very bottom. This guide explains how CSS establishes this layering order, how to configure individual properties for each image, and how to utilize the shorthand background syntax efficiently.

The Layering Stack Order

When defining multiple backgrounds, CSS treats the list of assets as a stacking context strictly based on declaration order:

  1. Top Layer: The first image specified in the comma-separated list renders on top.
  2. Middle Layers: Any images declared between the first and the last are stacked sequentially beneath preceding images.
  3. Bottom Layer: The final image in the list renders behind all other images.
  4. Base Color: If a background-color is applied, it sits below every background image layer.

Because the first image sits at the front, it must contain transparency (such as a PNG, SVG, or semi-transparent gradient); otherwise, it will completely obscure the images placed beneath it.

Configuring Independent Properties

Each image in the stack can have its own dimensions, repetition behavior, and position. You achieve this by providing a matching, comma-separated list of values for each corresponding CSS property:

.card {
  background-image: url('pattern-overlay.png'), url('main-graphic.jpg');
  background-repeat: repeat, no-repeat;
  background-position: top left, center center;
  background-size: 50px 50px, cover;
}

If you provide fewer values for a property than there are images, CSS cycles through the available values from the beginning until every image has an assigned value. For example, if you declare three background images but only two background-repeat values, the third image will inherit the first repeat value.

Using the Shorthand Property

To keep stylesheets concise, multiple backgrounds can be defined using the shorthand background property. Each layer is grouped together, separated by a comma:

.hero-banner {
  background: 
    url('badge.svg') top right / 100px 100px no-repeat,
    url('gradient.png') top left / 100% 100% repeat-x,
    url('landscape.jpg') center / cover no-repeat #1a1a1a;
}

When using the shorthand syntax, specific rules apply:

  • The background-size value must immediately follow background-position, separated by a forward slash (position / size).
  • The background-color property can only be included in the very last layer definition, as it applies globally beneath the entire image stack. Including a color in an earlier layer invalidates the rule.