background-image

Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Jun 25, 2021Updated Dec 7, 2023
Contribute to Docs

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

Syntax

background-image: value | none;

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;

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

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

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

Background with squirrel gif repeated over tree image

All contributors

Looking to contribute?

Learn CSS on Codecademy