CSS Background

CSS background prperty can add background effect to your element.

You have following background properties in CSS

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Shorthand property is background

CSS background-color

Set the background-color of the element

<style>
 .section{
    background-color: olive;
    padding: 10px 8px;
    margin :20px 0px;
    border:1px solid #ccc;
  }
</style>
<div class="section"> CSS background-color property example </div>

Change opacity of the background

Change the opacity property from 1 to 0;

.section{
    background-color: green;
    opacity:0.6;
}

When you fill the background with color it will fill the content area + padding area too.

CSS background-image

background-image property is used to apply the image to the background. If the size of the image is not enough to fit the size of the element then the image repeats inside the background.

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

CSS background-repeat

By default background image repeats vertically and horizontally.

background-repeat: repeat-x; can repeat the image horizontally.

background-repeat: repeat-y; can repeat the image vertically.

If you do not want to repeat the background then use  background-repeat: no-repeat;

CSS background-position

Specify the position of the background image

div{
  background-image:url('images/heart-48.png');
  background-repeat: no-repeat;
  background-position: right top;
  width:150px;
  height:150px;
  border:1px solid #ccc;


}