,
|

The new CSS3 background property option

CSS Background Property

The background shorthand property sets all the background properties in one declaration.

The properties that can be set, are: background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-image.





The new Background Option

CSS3 has introduced a new option that can apply to the background property. This option is background-size.

background-size

A new property introduced by the CSS3 Backgrounds and Borders module is background-size. The property adds new functionality to CSS allowing designers to specify the size of background images using either lengths, percentages, or by using one of two keywords; contain or cover.

Browser support has grown of late, with the current versions of most popular browsers now supporting background-size, including Firefox, Safari, Chrome, Internet Explorer and Opera.

Here’s a very basic example. In the first box below background-size has been set to auto (the default value) meaning that the background image is shown at its original size. In the second box background-size has been set to 275px (w) x 125px (h). In both cases, the background image has been defined so as not to be repeated.

background-size: auto;
background-size: 275px 125px;

Source Code

#example1 {
   background-size: auto;
}

#example2 {
   background-size: 275px 125px;
}

For more information
WEBFLUX. "Background-size" http://www.css3.info/preview/background-size/

1 comments:

  • Anonymous   April 12, 2012

    Oh, that's very helpful.. = )

Post a Comment