The background-image property sets the element's background image.
By default, the image repeats vertically and horizontally.
This property can also specify a color gradient.
An element with a background-image.
<style>
.bg-image {
background-image: url("/img/css/sunflowers.jpg");
height: 200px;
}
</style>
<div class="bg-image"></div>
The background can also be defined by multiple images which are then stacked on top of each other. With transparent images interesting effects can be obtained.
<style>
.bg-image-multiple {
background-image: url("/img/css/vangogh.jpg"),
url("/img/css/church-at-auvers.jpg");
background-repeat: no-repeat;
height: 350px;
}
</style>
<div class="bg-image-multiple"></div>
background-image: url(url) | none | linear-gradient() | radial-gradient() |
repeating-linear-gradient() | repeating-radial-gradient() |
inherit;
| Value | Description |
|---|---|
| url | Image URL or file path. When using multiple images, separate URLs with a comma |
| none | Default. No background will be used |
| linear-gradient() | Sets linear gradient with at least two colors (top to bottom) |
| radial-gradient() | Sets radial gradient with at least two colors (center to edges) |
| repeating-linear-gradient() | Repeats linear gradient |
| repeating-radial-gradient() | Repeats radial gradient |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different background-image values.
<style>
.bg-example {
background-image: linear-gradient(orangered, purple);
height: 200px;
}
</style>
<div class="bg-example"></div>
This table shows when background-image support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
4.0 | Sep 1997 |
 Opera
|
3.5 | Nov 1998 |
 Safari
|
1.0 | Jun 2003 |
