background-image
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 setbackground-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);}
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;}
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;}
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Career path
Full-Stack Engineer
A full-stack engineer can get a project done from start to finish, back-end to front-end.Includes 51 CoursesWith Professional CertificationBeginner Friendly150 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours