CSS Multiple Backgrounds

CSS Multiple Backgrounds

CSS allows two or more background images to be applied to the same element by separating the images with commas.

Each background creates its own layer. The first background listed is painted on top, and each background that follows is painted underneath the previous one. Individual background layers can have their own position, size, repeat, origin, clip, and attachment settings.

Adding Multiple Backgrounds

Multiple background images are added to background-image as a comma-separated list.

.box {
  background-image:
    url("images/leaves-400x400.png"),
    url("images/landscape-1200x800.jpg");
}

This example creates two background layers on the same element. The transparent leaves form one layer and the landscape photograph forms another.

There is no need to add extra HTML elements simply to create additional decorative background layers.

Background Layer Order

Background layers are painted in the order they are listed, with the first image closest to the viewer.

.box {
  background-image:
    url("images/leaves-400x400.png"),
    url("images/landscape-1200x800.jpg");
}

The leaves are painted above the landscape because they are listed first. Their transparent areas allow the photograph underneath to remain visible.

Reversing the order can hide the leaves because an opaque photograph placed on top covers the layers beneath it.

Positioning Background Layers

Each background image can have its own background-position value. The values are separated by commas and correspond to the images in the same order.

.box {
  background-image:
    url("images/leaves-400x400.png"),
    url("images/landscape-1200x800.jpg");
  background-position:
    right 20px bottom 20px,
    center;
}

The leaves are positioned 20 pixels from the right and bottom edges, while the landscape is centered.

Sizing Background Layers

Different background-size values can also be assigned to individual layers.

.box {
  background-image:
    url("images/leaves-400x400.png"),
    url("images/landscape-1200x800.jpg");
  background-size:
    180px auto,
    cover;
}

The leaves are displayed at a width of 180 pixels while preserving their proportions. The landscape uses cover so it fills the background area.

Repeating Background Layers

The background-repeat property can control repetition separately for each background layer.

.box {
  background-image:
    url("images/leaves-400x400.png"),
    url("images/pattern-200x200.png");
  background-repeat:
    no-repeat,
    repeat;
}

The leaves appear once while the pattern repeats across the background area.

Background Color with Multiple Backgrounds

An element can have a background color in addition to multiple background images.

.box {
  background-color: lightblue;
  background-image:
    url("images/leaves-400x400.png"),
    url("images/landscape-1200x800.jpg");
}

The background color is painted beneath all of the background image layers. It can provide a fallback color if an image cannot be displayed and can remain visible through transparent areas that are not covered by other backgrounds.

Matching Values to Background Layers

When multiple backgrounds are used, comma-separated values in other background properties are matched to the background images in the same order.

.box {
  background-image:
    url("images/leaves-400x400.png"),
    url("images/landscape-1200x800.jpg");
  background-position:
    right bottom,
    center;
  background-size:
    180px auto,
    cover;
  background-repeat:
    no-repeat,
    no-repeat;
}

The first position, size, and repeat values apply to the leaves. The second values apply to the landscape.

If fewer values are supplied than there are background images, the browser repeats the list of values as necessary to provide a value for each layer.

Combining Images and Gradients

CSS gradients can also be used as background images, which means they can be combined with image files in the same layered background.

.box {
  background-image:
    linear-gradient(rgb(0 0 0 / 35%), rgb(0 0 0 / 35%)),
    url("images/landscape-1200x800.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

The semi-transparent gradient is listed first, so it is painted over the photograph. This technique can darken an image to improve the readability of light-colored text placed over it.

Gradients are covered in detail later in this Backgrounds & Gradients section.

Multiple Backgrounds Example

The following example combines the transparent leaves with the landscape photograph. Each layer has its own position and size.

.box {
  background-image:
    url("images/leaves-400x400.png"),
    url("images/landscape-1200x800.jpg");
  background-position:
    right 20px bottom 20px,
    center;
  background-size:
    180px auto,
    cover;
  background-repeat:
    no-repeat,
    no-repeat;
}

Open the example in the editor and change the position or size of the leaves without changing the landscape. You can also reverse the two image URLs to see why background layer order matters.