CSS3 background-size property with example

The "background-size" property specifies the size of the background image.

Until CSS3, the background image size was determined by the actual size of the image.

But CSS3 provides a way to specify the size of the background image, which allows us to
re-use background images in different contexts.

We can specify the size in pixels or in percentages. If you specify the size as a percentage, the size is relative to the width and height of the parent element.

Internet Explorer 9, Firefox 4, Chrome, Safari 5 and Opera support these new background properties.

Firefox 3.6 and earlier requires the prefix -moz- to support the background-size property.

Safari 4 requires the prefix -webkit- to support the new background properties.

Example for background-size property..

/*background image specified in pixels, this will resize the original image to the specified size..*/

.test
{
background:url(img1.gif);
background-size:80px 60px;
background-repeat:no-repeat;
/* Firefox 3.6 */
-moz-background-size:80px 60px;
}


/*background image specified in percentage, this will resize the original image relative to the width and height of the parent element*/

div
{
background:url(img1.gif);
background-size:100% 100%;
background-repeat:no-repeat;
/* Firefox 3.6 */
-moz-background-size:100% 100%;
}

CSS3 Other Background Properties..