In modern websites, background plays an important role as it can make the webpage stunning and more attractive than usual.
CSS provides us several background properties which can be used to style the background. These background properties provide us full control over the background of an element. For example, we can change the color of the background, its position in the layout, its attachment, and much more.
Some of the most commonly used background properties are listed below:
background-colorbackground-imagebackground-repeatbackground-positionbackground-attachment
In this CSS tutorial, we will discuss these properties in detail. So, let’s get started:
CSS background-color
CSS background-color property sets the background color of an element.
The background color can be specified in any valid CSS color format such as ‘color name’, ‘HEX’, ‘RGB’, ‘HSL’, etc.
The example below sets the background color of the <body> element to yellow. Try it out:
Example:
body{
background-color: yellow;
}
You can use the background-color property to set the background color of any element you want. Refer to the example below:
Example:
h1{
background-color: pink;
}
h2{
background-color: orange;
}
div{
background-color: cyan;
}
p{
background-color: yellow;
}
CSS background-image
CSS background-image property is used to set an image as a background of the given element. It takes help of the inbuilt function url() which takes the image source/location as a parameter and returns the image. Refer to the example below:
Example:
body{
background-image: url('images/tiles.jpg')
}
Note: By default, the background image repeats itself to cover the entire background of the element.
The background-image property can be used to set the background image of any individual element you want.
In the example below, the background-image property sets ’tiles.jpg’ as the background image of the <h1> and <p> elements. Try it out:
Example:
h1{
background-image: url('images/tiles.jpg');
}
p{
background-image: url('images/tiles.jpg');
}
CSS background-repeat
CSS background-repeat property specifies how the background image should be repeated to cover the entire background of the element.
Using the background-repeat property we can specify whether the background image should repeat horizontally, vertically, both, or not repeated at all.
In the example given below, the background-repeat property is set to repeat-x. Therefore, the background image is repeated only horizontally.
Example:
body{
background-image: url('images/smile.png');
background-repeat: repeat-x;
}
To repeat the background image vertically, set the background-repeat property to repeat-y. Refer to the example below:
Example:
body{
background-image: url('images/smile.png');
background-repeat: repeat-y;
}
You can also set background-repeat property to no-repeat. In this case, the background image will not be repeated at all.
Example:
body{
background-image: url('images/smile.png');
background-repeat: no-repeat;
}
CSS background-position
CSS background-position property specifies the position of the background image.
If the background-position is not specified, by default, the background image is positioned at the top-left corner of the element. Refer to the example below:
Example:
body{
background-image: url('images/smile.png');
background-repeat: no-repeat;
}
CSS provides us several values which can be used to change the position of the background image such as, ‘left’, ‘right’, ‘bottom’, ‘center’, ‘top right’, ‘bottom left’, etc.
In the example below, the background-position property is set to top right. Therefore, the background image is positioned at the top right corner of the element. Try it out:
Example:
body{
background-image: url('images/smile.png');
background-repeat: no-repeat;
background-position: top right;
}
Try out other values of the background-position property-
- background-position: top left;
- background-position: top;
- background-position: top right;
- background-position: left;
- background-position: center;
- background-position: right;
- background-position: bottom left;
- background-position: bottom;
- background-position: bottom right;
CSS background-attachment
CSS background-attachment property specifies whether the background image should be fixed at the specified position or scroll along with the webpage.
In the example below, the background-attachment property is set to fixed. This means that the background image will be fixed and not scroll along with the rest of the page. Try it out:
Example:
body{
background-image: url('images/smile.png');
background-repeat: no-repeat;
background-position: top right;
background-attachment: fixed;
}
If the background-attachment property is set to scroll, the background image will scroll along with the rest of the page.
Example:
body{
background-image: url('images/smile.jpg');
background-repeat: no-repeat;
background-position: top right;
background-attachment: scroll;
}
CSS Background Shorthand Property
CSS background property is shorthand of the background-color, background-image, background-repeat, background-attachment, and background-position property.
The background shorthand property allows you set all the background properties in one declaration.
In the example below, each background property is specified individually-
Example:
body{
background-color:yellow;
background-image: url('images/smile.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}
All these properties can be combined into a single property using the background shorthand property and the result would be exactly the same as above. Try it out:
Example:
body{
background: yellow url('images/smile.jpg') no-repeat fixed top right;
}
All Background Properties
| Property | Description |
| background-color | Sets the background color of an element. |
| background-image | Sets a given image as the background of an element. |
| background-repeat | Specifies whether the background should repeat or not. |
| background-position | Sets the position of the background. |
| background-attachment | Specifies whether the background image should be fixed or scroll along with the webpage. |
| background-origin | Specifies the origin of the background image. |
| background-size | Specifies the size of the background image. |
| background-clip | specifies how far an element’s background color or image should extend within the element. |
| background-blend-mode | specifies how different background images/colors should blend with each other when we applied on a single element. |
| background | This is the shorthand property for setting all background properties at once. |
