CSS background-image property sets an image as the element’s background.
In the example below, the <body> element uses the ‘sand.jpg’ image as its background. Try out the below example to see how it works:
Example:
body{
background-image: url('images/sand.jpg');
}
It is also possible to set multiple images as element’s background. Image URLs must be separated by a comma.
See the example below:
Example:
body{
background-image: url('images/golden-star.png'),
url('images/sand.jpg');
}
Important Points
You should always keep the below points in mind while applying the background-image property:
- The background of an element is the total size of the element including the padding and border but excluding the margin. Therefore, by default, the background image covers the whole background area of the element.
- By default, the background image is placed at the top left corner of the element. If it is smaller than the size of the element, it will repeat itself horizontally and vertically to cover the entire background.
- If the image source(URL) is not found, the browser automatically sets the
background-imageproperty tonone. - CSS gradients can also be used as the background image.
CSS Syntax
The background-image property has the following syntax:
background-image: none|url|gradient|initial|inherit;
Property Values
The background-image property accepts the following values:
| none | Specifies no background image. This is the default value. |
| url(source) | Specifies the url/source of the image that is to be set as the background image. Multiple URLs must be separated by a comma. |
| linear-gradient() | Sets the specified linear gradient as the background image. |
| radial-gradient() | Sets the specified radial gradient as the background image. |
| repeating-linear-gradient() | Sets the repeating linear gradient as the background image. |
| repeating-radial-gradient() | Sets the repeating radial gradient as the background image. |
| initial | Sets the background-image property to its default value. |
| inherit | Inherits the background-image property from the parent element. |
General Info
| Default Value | none |
| Inherited | No |
| JavaScript Usage | element.style.backgroundImage = “images/sand.jpg” |
More Examples
Set a linear gradient as background image.
Example:
div{
background-image: linear-gradient(red, yellow);
height: 200px;
}
Set a repeating linear gradient as background image.
Example:
div{
background-image: repeating-linear-gradient(red, yellow 20%);
height: 200px;
}
Set a radial gradient as background image.
Example:
div{
background-image: radial-gradient(red, yellow);
height: 200px;
width: 200px;
border-radius: 50%;
}
Set a repeating radial gradient as background image.
Example:
div{
background-image: repeating-radial-gradient(red, yellow 20%);
height: 200px;
width: 200px;
border-radius: 50%;
}
Related Pages
CSS Tutorial: CSS Background
