HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Set a background-image for the <body> element
The background-image property sets one or more background images for an element.
By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
| Default value: | none |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS1 + new values in CSS3 |
| JavaScript syntax: | object.style.backgroundImage="url(img_tree.gif)" Try it |
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
| Value | Description | Demo |
|---|---|---|
| url('URL') | The URL to the image. To specify more than one image, separate the URLs with a comma | Demo ❯ |
| none | No background image will be displayed. This is default | |
| conic-gradient() | Sets a conic gradient as the background image. Define at least two colors | Demo ❯ |
| linear-gradient() | Sets a linear gradient as the background image. Define at least two colors (top to bottom) | Demo ❯ |
| radial-gradient() | Sets a radial gradient as the background image. Define at least two colors (center to edges) | Demo ❯ |
| repeating-conic-gradient() | Repeats a conic gradient | Demo ❯ |
| repeating-linear-gradient() | Repeats a linear gradient | Demo ❯ |
| repeating-radial-gradient() | Repeats a radial gradient | Demo ❯ |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Sets two background images for the <body> element. Let the first image appear only once (with no-repeat), and let the second image be repeated:
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-repeat: no-repeat, repeat;
background-color: #cccccc;
}
Use different background properties to create a "hero" image:
.hero-image {
background-image: url("photographer.jpg"); /* The
image used */
background-color: #cccccc; /* Used if the image is
unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Sets a linear-gradient (two colors) as a background image for a <div> element:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
linear-gradient(red, yellow);
}
Sets a linear-gradient (three colors) as a background image for a <div> element:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
linear-gradient(red, yellow, green);
}
The repeating-linear-gradient() function is used to repeat linear gradients:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}
Sets a radial-gradient (two colors) as a background image for a <div> element:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
radial-gradient(red, yellow);
}
Sets a radial-gradient (three colors) as a background image for a <div> element:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
radial-gradient(red, yellow, green);
}
The repeating-radial-gradient() function is used to repeat radial gradients:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
repeating-radial-gradient(red, yellow 10%, green 20%);
}
CSS tutorial: CSS Background, CSS Backgrounds (advanced), CSS Gradients
HTML DOM reference: backgroundImage property