CSS3 Background

CSS3 has introduced new background properties to reduce the workload of developers.

Background Size

Before CSS3 release, the actual image size determines the background size which made working with background very complex.

With the help of CSS3, background size can be manipulated easily.

In CSS3, background-size property is used to manipulate the background size like shown below.

div
{
background:url(background.jpg);
background-size:80px 60px;
background-repeat:no-repeat;
}
Background Origin

The background-origin property is used to specify where the background is positioned.

CSS3 Background

The background image can be placed in the content-box, padding-box or the border-box as shown in the above image.

The below example shows background image placed in the content-box; 

div
{
background:url(background.jpg);
background-size:80px 60px;
background-repeat:no-repeat;
background-origin:content-box;
}