HTML Dog
Skip to navigation

CSS Property: background-size

The size of a background image.

background-size: contain and background-size: cover

Possible Values

ValueDescriptionExample
autoThe intrinsic dimensions (or aspect ratio, if used alongside another value; see below) of the image. Default behavior.
[length]When used alone, this refers to the width of the image while the height defaults to auto.64px
[percentage]Percentage of the background positioning area (defined by background-origin). When used alone, this refers to the width of the image while the height defaults to auto.25%
containImage is scaled to the largest size possible so that the entire image fits inside the background positioning area. Image aspect ratio is maintained.
coverImage is scaled to the largest size possible so that it fills the background positioning area. Image width or height is clipped while its aspect ratio is maintained.
[value] [value]The image width (first value) and height (second value). Values can be a mix of auto, lengths, and percentages.100% 32px
[values], [values]For multiple backgrounds. Values separated by commas correspond to multiple images separated by commas with background-image.100% 32px, cover
inherit
initial
unset

Example


header {
    background-image: url("logo.png");
    background-size: 100% 50%;
}
/* "logo.png" is stretched to the entire width of the header and half of its height. */

Browser support