CSS background cover and contain

This will fill the background with the image. Some parts of the image may be hidden

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
background-image: url(../images/fish.jpg);

This will show all of the background image. Unless the images is the same dimensions of the window, it will not cover the entire bg.

-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
background-image: url(../images/fish.jpg););

Thank you for reading!

It's only fair to share...Tweet about this on Twitter
Twitter
Share on Facebook
Facebook
Email this to someone
email
This entry was posted in CSS3, HTML/CSS and tagged , . Bookmark the permalink.