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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div { height: 200px; width: 400px; line-height: 200px; text-align: center; font-size: 50px; color: white; } #div1 { background-image: url('https://www.tutorialkart.com/sample_image.jpg'); } </style> </head> <body> <div id="div1">Hello World</div> </body> </html>
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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div { height: 200px; width: 400px; line-height: 200px; text-align: center; font-size: 50px; color: white; } #div1 { background-image: url('https://www.tutorialkart.com/sample_image_small.jpg'); } </style> </head> <body> <div id="div1">Hello World</div> </body> </html>
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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div { height: 200px; width: 400px; line-height: 200px; text-align: center; font-size: 50px; color: white; } #div1 { background-image: linear-gradient(green, yellow); } </style> </head> <body> <div id="div1">Hello World</div> </body> </html>
In the following example, we passed four colors to linear-gradient().
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div { height: 200px; width: 400px; line-height: 200px; text-align: center; font-size: 50px; color: white; } #div1 { background-image: linear-gradient(green, yellow, orange, gray); } </style> </head> <body> <div id="div1">Hello World</div> </body> </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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div { height: 200px; width: 400px; line-height: 200px; text-align: center; font-size: 50px; color: white; } #div1 { background-image: radial-gradient(green, yellow); } </style> </head> <body> <div id="div1">Hello World</div> </body> </html>
background-image with repeating-linear-gradient
In the following example, we set background-image property with repeating-linear-gradient() value.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div { height: 200px; width: 400px; line-height: 200px; text-align: center; font-size: 50px; color: white; } #div1 { background-image: repeating-linear-gradient(blue 5%, skyblue 10%, gray 5%); } </style> </head> <body> <div id="div1">Hello World</div> </body> </html>
background-image with repeating-radial-gradient
In the following example, we set background-image property with repeating-radial-gradient() value.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div { height: 200px; width: 400px; line-height: 200px; text-align: center; font-size: 50px; color: white; } #div1 { background-image: repeating-radial-gradient(blue , skyblue 10%, gray 5%); } </style> </head> <body> <div id="div1">Hello World</div> </body> </html>
Conclusion
In this CSS Tutorial, we learned about background-image property, and how to use this property for HTML Elements, with examples.