background-size
The CSS background-size property specifies the size of background image. The image can be stretched in order to fill the whole element or it can has particular size. The background-size is used in conjunction with the background-image property.
Values of the background-size property
<length> | <percentage> | auto | cover | containauto
auto – default value.
The background image preserves its width and height.
length
<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 values the first corresponds to the width of image, the second corresponds to the height of the image
- If there is one value, it refers to the image’s width and the second omitted value is the height of image that is set to
auto.
See the Pen background-size: length; by majadc (@majadc) on CodePen.
percentage
<percentage> – sets the value of the width and height of the background image as percent of the container area. There are one or two value possible. The first corresponds to the width of the image, second corresponds to height of the image. If the second value is omitted its value is set to auto.
See the Pen background-size: precentage by majadc (@majadc) on CodePen.
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.
See the Pen Untitled by majadc (@majadc) on CodePen.
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.
See the Pen Untitled by majadc (@majadc) on CodePen.
Related
- background
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-color