CSS Background Properties

CSS background property is used to define the background effects on element. These are CSS background properties which can be used in document.

  • 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 both directions
  • background-attachment: Defines whether the background stays fixed on the screen while scrolling 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 color in background of div, span and any other elements then we can use 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 very important property to make graphic orientated website. Whenever we need image in background of div, span and body to make 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 small image in whole body or inside of any other element we can use Background repeats property. By doing this we can reduce the size of webpage, because large image 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;
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *