CSS background-image Property
CSS background-image property sets the background with specified image or gradient values for HTML Element(s).
The syntax to specify a value for background-image property is
background-image: value;
The following table gives the possible values that could be given to background-image property.
| Value | Description | |
|---|---|---|
| url(‘URL‘) | The URL to the image. More than one image can be specified by separating the URLs with a comma. | background-image: url(“sample-image.jpg”); |
| none | No background image. | background-image: none; |
| linear-gradient() | Sets a linear gradient as the background image. | background-image: linear-gradient(red, blue); |
| radial-gradient | Sets a radial gradient as the background image. | background-image: radial-gradient(red, blue); |
| repeating-linear-gradient | Repeats a linear gradient. | background-image: repeating-linear-gradient(red, blue); |
| repeating-radial-gradient | Repeats a radial gradient. | background-image: repeating-radial-gradient(red, blue); |
| initial | Sets this property to its default value. | background-image: initial; |
| inherit | Inherits this property from its parent element. | background-image: inherit; |
The default value of background-image is none.
Examples
In the following examples, we try out background-image with different values.
background-image with URL
In the following example, we apply an image, specified by URL, as background, for a div element.
Example
If the size of background is less than the size of HTML Element, then the background image is repeated along both X and Y axis.
Example
background-image with linear-gradient
In the following example, we set background-image property with linear-gradient() value. Two color values are given to linear-gradient().
index.html
In the following example, we passed four colors to linear-gradient().
index.html
background-image with radial-gradient
In the following example, we set background-image property with radial-gradient() value. Two color values are given to radial-gradient().
index.html
background-image with repeating-linear-gradient
In the following example, we set background-image property with repeating-linear-gradient() value.
index.html
background-image with repeating-radial-gradient
In the following example, we set background-image property with repeating-radial-gradient() value.
index.html
Conclusion
In this CSS Tutorial, we learned about background-image property, and how to use this property for HTML Elements, with examples.