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
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 – default value.
The background image preserves its width and height.
<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.
If there is one value, it refers to the width and the second – height – is sets to
<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
background-size: 50% 50%;
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.
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.