Setting Backgrounds & Gradients - Learn to Code HTML and CSS: Develop and Style Websites - page 151

Figure 7.12 A background image occupying 75% of an element's height with the im-
age's width automatically adjusted to preserve its original aspect ratio
Cover & Contain Keyword Values
In addition to length background-size property values, there are also cover and
contain keyword values available to the background-size property.
The cover keyword value specifies that the background image will be resized to com-
pletely cover an element's width and height. The background image's original aspect ratio
will be preserved, yet the image will stretch or shrink as necessary to cover the entire ele-
ment. Often when using the cover keyword value, part of the background image is cut off
in order for the image to occupy the full available space of the element.
The contain keyword value, on the other hand, specifies that the background image will
be resized to reside entirely contained within an element's width and height. In doing so
the background image's original aspect ratio will be preserved, but the image will stretch
or shrink as necessary to remain within the width and height of the element. In contrast
with the cover keyword value, the contain keyword value will always show the full
background image; however, oftentimes it will not occupy the full available space of the
element.