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 |