background-size

The background-size is the Css property which specifies the size of background image. The image can be stretched in order to fill the whole element or it can has particular size. To use it you need to set background-image property.

Values of the background-size property

<length> | <percentage> | auto | cover | contain

The initial value for this property is auto.

CSS rules for the example element

    width:500px;
    height:500px;
    background-color:#CC939E;
    background-image: url('../images/man.jpg');
    background-repeat:no-repeat;
    background-position:0 0;

auto

auto – default value.

The background image preserves its width and height.

background-size:auto;

lenght

<length> – sets the value of the width and height of the background image in length units (px, em). There are one or two values possible.

If there are two value the first refers to the width of image, the second to its height.

background-size:300px 200px;

If there is one value, it refers to the width and the second – height – is sets to auto.

background-size:300px;

percentage

<percentage> – sets the value of the width and height of the background image in percent of the container area. There are the one or two value possible. The first corresponds to the width of the image, second to height of the image. If the second value is omitted its value is sets to auto.

background-size: 50% 50%;

contain

contain – scales the background image to the largest dimensions (the width and the height) in order to fill the container area but it always show the whole image. It maintains the correct proportions of the image. It does not distort of the image.

background-size: contain;

cover

cover – scale the background image to the largest dimensions as possible in order to fill the container area completely if it’s mean that the not whole image can be visible. The aim is to cover the whole background area.

background-size: cover;

Related

Resources

CSS3 Spec

MDN

Browser compatibility

background-size

Internet Explorer
9.0
Firefox
3.6
Chrome
3.0
Safari
4.1
Opera
10.0
Mobile
Safari Mobile
works
Android
works
Chrome Mobile
works
IE Phone
works
Opera Mini
works
Opera Mobile
works