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