The background property defines the background of an element.
This can include a color, an image, a color gradient, and more.
An element with both a color and an image background.
<style>
.image-color {
background: #d2c54b url("/img/css/sunflowers.jpg") no-repeat right;
height: 250px;
padding: 35px;
}
</style>
<div class="image-color"></div>
The color fills the space that is not covered by the image.
url("/img/css/sunflowers.jpg") points to the background image.
no-repeat specifies that the background image is not repeated.
right places the background image to the right of the element.
The background property adds a background to an element.
This property is a shorthand for several properties:
Multiple backgrounds can be assigned to an element with this property.
background: bg-color bg-image position/bg-size bg-repeat
bg-origin bg-clip bg-attachment | initial | inherit;
| Value | Description |
|---|---|
| background-color | Sets the background color |
| background-image | Sets one or more background images |
| background-position | Sets the background-position |
| background-size | Sets the background-size |
| background-repeat | Sets the background-repeat behavior |
| background-origin | Sets the background positioning area |
| background-clip | Sets the background painting area |
| background-attachment | Sets whether background is fixed or scroll with the rest of the page |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
The background property can specify a transparent background.
Simply use the rgba function to create a transparent color.
An element with a white background that is 50% transparent.
<style>
.bg {
background: lightblue;
padding: 20px;
}
.opaque {
background-color: rgba(255, 255, 255, 0.5);
padding: 20px;
}
</style>
<div class="bg">
<div class="opaque">
Background is white with 50% opacity.
</div>
</div>
This table shows when background 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 |
