CSS Background Properties

The CSS background property is used to define the background effects on elements. These are CSS background properties that can be used in documents.

• background-color: Defines the color of the background.
• background-image: Defines the image to use for the background.
• background-repeat: Defines whether the background image will be repeated that horizontally, vertically, and in both directions
• background-attachment: Defines whether the background stays fixed on the screen while scrolling the page.
• background-position: Defines the position of the background.

CSS background-color
The background-color property is used to specify the background color of the element. If we want to set the color in the background of div, span, and any other elements then we can use the background-color property.

We can follow the below code to set background color:

.div{
background-color: #ff0000;
}

CSS background-image
The background-image property is used to set an image as a background of an element. It is a very important property to make a graphic-orientated website. Whenever we need the image in the background of div, span, and body to make the layout more beautiful or visually strong, we will have to use this property.

We can set the background image for a div like this.

.div {
background-image: url("sample-image.gif");
}

CSS background-repeat
If we need to repeat the small image in the whole body or inside of any other element we can use the Background repeats property. By doing this we can reduce the size of the webpage because the large images will take extras KBs or MBs.

.div {
background-image: url(“sample-image.gif”);
background-repeat: repeat-x;
}

CSS background-attachment
If you set fixed the background image then the image will not move during scrolling in the browser. Below is the code for background attachment:

.div {
background-image: url("sample-image.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}

CSS background-position
The background-position property is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage. These are the positions center, top, bottom, left, right

.div{
background: white url('sample-image.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}