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;
}