CSS - Multiple Backgrounds

In CSS, you can use multiple background images for an element. First background should be layered on top, and the last background should be layered behind. Only the last background can have a background color.

Syntax

.multibackgrounds {
   background:
      background1,
      background2,
      /* , */ backgroundN;
}

You can use shorthand and individualbackgroundproperties, excludingbackground-color.

The followingbackgroundproperties can be provided as a list, one for each background:background,background-attachment,background-clip,background-image,background-origin,background-position,background-repeat,background-size.

CSS Multiple Backgrounds - Using background-image property

The following example demonstrates adding two background images usingbackground-imageproperty, where the first image is stacked on top and the second is behind it −

CSS Multiple Backgrounds - Using background-size Property

The following example demonstrates the use of multiple background images of different sizes usingbackground-sizeproperty. The first image’s size is 150px, and the second image’s size is 300px −

CSS Multiple Backgrounds - Using background Property

The following example demonstrates addition of three background images using the shorthand propertybackground−

CSS Multiple Backgrounds - Full Size Image

The following example demonstrates full sized background image, set usingbackground-size: coverproperty −

CSS Multiple Backgrounds - Hero Image

The following example demonstrates the setting of a hero image, refers to a large image with text using differentbackgroundproperties on <div> −

CSS Multiple Backgrounds - Using background-origin Property

The following example demonstrates how the background image is positioned within a box usingbackground-originproperty −

CSS Multiple Backgrounds - Using background-clip Property

The following example demonstrates how the background image should be displayed within box usingbackground-clipproperty −

CSS Multiple Backgrounds - Related Properties

All the properties related tobackgroundare listed in the table below:

PropertiesDescriptionbackgroundShorthand for background related properties.background-attachmentSpecifies the position of the background relative to the viewport, either fixed or scrollable.background-clipControls how far a background image extends beyond the element’s padding or content box.background-imageSets one or more background image(s) on an element.background-originSets the origin of the background.background-positionSets the initial position of each image in a background.background-repeatControls the repetition of an image in the background.background-sizeControls the size of the background image.