CSS background-image

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

Syntax

background-image: value | none;

Copy to clipboard
Copy 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;

Copy to clipboard
Copy 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);
}

Copy to clipboard
Copy to clipboard

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;
}

Copy to clipboard
Copy to clipboard

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;
}

Copy to clipboard
Copy to clipboard