Mozilla has a good Background-size demo
The background-size property is specified in one of the following ways:
- Using the keyword values contain or cover.
- Using a width value only, in which case the height defaults to auto.
- Using both a width and a height value, in which case the first sets the width and the second sets the height. Each value can be a , a , or auto.
- To specify the size of multiple background images, separate the value for each one with a comma.
/* Keyword values */
background-size: cover;
background-size: contain;
/* One-value syntax */
/* width (height becomes 'auto') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
/* Two-value syntax */
/* first width, second height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
/* Multiple backgrounds */
background-size: auto, auto;
/* Not to be confused with `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
/* Global values */
background-size: inherit;
background-size: initial;
background-size: unset;