When adding a background image to an element, it’s important to realize that the background is simply that. The element won’t increase in size to accommodate that great image you’ve chosen. If you want the image to be displayed in full, you need to make sure the element is wide and tall enough. At least, that’s the case in older browsers. CSS3 gives you more flexibility with the background-size property, which is supported by all browsers in widespread use except IE 8 and earlier.
background-size: auto | length | cover | contain | initial | inherit;
The background-size property accepts the following values:
- contain - Scales the image to the largest possible size so that both, its width and height, fit into the background positioning area.
- cover - Scales the image to its smallest size so that both, its width and height, can completely cover the background positioning area.
- length or percentage - One or two lengths (pixels, points, ems…) or percentages.
- auto – Sets the property to its default values which are the original values of the image.
- initial or inherit
When using lengths or percentages, the first value sets the width of the background image, and the second sets its height. If only one value is given, the height is treated as auto. Percentages are relative to the background positioning area as determined by background-origin.
The contain, cover, and auto keywords all preserve the image’s aspect ratio.
Example with background-size property and contain and auto values: