Background Size

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.
1
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #