CSS background Property
The CSS background is a shorthand used to set all background style properties. Background property includes the following properties:
- background-color, which is used for setting a background color.
- background-image, which is used for setting one or multiple background images for an element.
- background-repeat, which is used for controlling the repeated position of an element.
- background-position, which is used for setting a background image position.
- background-origin, which is used for defining the background positioning area which is the position of an image that is placed by using the background-image property.
- background-clip, which is used for placing background image or color to underneath its border.
- background-attachment, which is used to define if the background image is fixed or it will scroll along with the rest of the page.
- background-size, which is used to define the background image size.
If one of the properties in the background shorthand property is background-size, a slash should be used for separating it from background-position.
When several background-image sources are used but background-color is also needed, it should be last on the list.
| Initial Value | See individual properties. |
| Applies to | All elements. It also applies to ::first-letter. |
| Inherited | No. |
| Animatable | Yes. Background-color, background-position, and background-size are animatable. |
| Version | CSS1+ new properties in CSS3 |
| DOM Syntax | object.style.background = "blue url(img.jpeg) bottom left repeat"; |
Syntax¶
background: bg-color bg-image bg-position bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;Example of the background property:¶
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Background property example</h2>
<p>Here the background color is set to green.</p>
</body>
</html>Example of the background property with an image applied to it: ¶
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
}
</style>
</head>
<body>
<h2>Background property example</h2>
<p>Here a background image is used.</p>
</body>
</html>See another example with background property where background-color, background-image, background-repeat, and background-attachment values are applied.
Example of the background property with different values:¶
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ccc url("/build/images/web-logo-black.png") no-repeat fixed center;
}
</style>
</head>
<body>
<h2>Background property example</h2>
<p>In this example background property specifies the background-color, the background-image property to set the image to the background, background-repeat to specify the image to be non repeated, background-attachment to specify the image to be fixed and background-position to specify the image to be in center.</p>
</body>
</html>In the following example, the background-size property is used to specify the size of the background.
Example of the background-size property: ¶
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #eee url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") no-repeat center 100px;
background-size: cover;
}
</style>
</head>
<body>
<h2>Background property example</h2>
<p>Here the size for the background is set to cover.</p>
</body>
</html>Here, the background-clip property specifies how far the background should extend within an element.
Example of the background-clip property: ¶
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 8px dotted #ccc;
padding: 25px;
background: #ccc;
background-clip: padding-box;
}
</style>
</head>
<body>
<h2>Background property example</h2>
<div>
<p>The background-clip for this div element is set to padding-box.</p>
</div>
</body>
</html>In the next example, the background-origin property is used. It lets the background image start from the upper left corner of the content.
Example of the background-origin property:¶
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 10px double #ccc;
padding: 25px;
background: url("/build/images/web-logo-black.png");
background-repeat: no-repeat;
background-origin: padding-box;
}
</style>
</head>
<body>
<h2>Background property example</h2>
<p>Here background-origin: padding-box (default) is set.</p>
<div></div>
</body>
</html>Values¶
| Value | Description |
|---|---|
| background-color | Sets the background color. |
| background-image | Sets one or more images. |
| background-position | Specifies the position of the background images. |
| background-size | Sets the size of the background image. |
| background-repeat | Specifies how to repeat the background images. |
| background-origin | Specifies the positioning area of the background images. |
| background-clip | Specifies the painting area of the background images. |
| background-attachment | Specifies whether the image is fixed or not. |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
0 Comments
CAN FEEDBACK
Emoji