Background - CSS Quick Syntax Reference Guide - page 51

CSS 3 added a four-value syntax, allowing a choice of which side of the element
the image will be positioned relative to. Using this syntax, the background in the next
example is positioned relative to the bottom right instead of the top left of the element.

background-position: bottom 5px right 5px;

This four-value syntax is supported only in Chrome 25+, Firefox 13+, IE9+,
Safari 5.28+, and Opera 10.5+.

background-size
The size of a background image is normally the same as the actual size of the image.
It can be changed with the background-size property, which allows the background to
be resized to a dimension specified in pixels or as a percentage relative to the background
positioning area.

background-size (1-2) : auto | <length> | <percentage> | cover | contain

With two values, the first value determines the width of the image and the second
value its height.

background-size: 150% 100%;

A single value defines only the width of the image. The height is then implicitly set to
auto , preserving the aspect ratio of the image.

background-size: 150%;

The contain and cover keywords size the background to fill the parent container
while maintaining the aspect ratio. The cover value ensures that the image completely
covers the background positioning area, whereas contain makes sure that the
background is contained within the area. Their difference is illustrated in Figure 14-1 .

positioning area

background-size:
contain;

background-size: cover;

overflow

Figure 14-1. Backgrounds sized with cover and contain keywords