background-image

Published Jun 25, 2021Updated Dec 7, 2023

Specifies the placement of one or more images in the background of an element.

Syntax

background-image: value | none;

to clipboardCopy to clipboard

Where value can be one of the following:

URL function value:
- ('cat.gif')
- ('../img/cat.png')
Gradient values:
- linear-gradient(0deg, #C1D279, #4062BF)
- repeating-linear-gradient(0deg, #1D4D19, #191A4D 10px)
- radial-gradient(circle at top, #40BFA5, #BB40BF)
- repeating-radial-gradient(#1D4D19, #191A4D 10px)

Multiple background images are supported. The first value specified will be stacked on top.

background-image: value, value;

to clipboardCopy to clipboard

Note: The background-color property should always be set, which acts as a fallback color when the set background-image is unavailable.

Example 1

Set a linear gradient background on the .hero class element, transitioning from yellow at the top to purple at the bottom:

.hero {
  width: 400px;
  height: 300px;
  background-image: linear-gradient(yellow, purple);
}

to clipboardCopy to clipboard

Linear Gradient background from yellow to purple

Example 2

Set two background images on the .hero class element with a fallback background color of blue. The fish.png image will be positioned on top of the ocean.png image:

.hero {
  width: 400px;
  height: 300px;
  background-color: blue;
  background-image: url('fish.png'), url('ocean.png');
  background-size: cover;
}

to clipboardCopy to clipboard

Background image with fish image over ocean image

Example 3

Set two background images on the .hero class element with a fallback background color of green. It repeats squirrel.gif on top of tree.png sizing down squirrel.gif to 20% and tree.png to cover:

.hero {
  width: 400px;
  height: 300px;
  background-color: green;
  background-image: url('squirrel.gif'), url('tree.png');
  background-repeat: repeat, no-repeat;
  background-size: 20%, cover;
}

to clipboardCopy to clipboard