The background-size property allows you to specify the size you want your background images to have.
We can include background-size within the shorthand background declaration by adding it after the background’s position, separated with a slash (/). But the browser ignores the entire declaration as no browser understands this shorthand; since they see it as incorrectly formatted.
So we want to use the background-size property as a separate declaration instead.
snippet
background-size: 100px auto, auto auto;
background-size: 100px, auto auto;
To use background properties, use commas to separate values for each image declared.
snippet
-webkit-background-size: 100px, cover;
-moz-background-size: 100px, cover;
-o-background-size: 100px, cover;
background-size: 100px auto, cover;
If we wanted our background image to be really big, we could declare:
snippet
-webkit-background-size: 100px, cover;
-moz-background-size: 100px, cover;
-o-background-size: 100px, cover;
background-size: 100px auto, cover;
By declaring just the width of the image, the second value will default to auto, and the browser will determine the correct height of the image based on the aspect ratio.
