Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

css background image resize width crop height

css background image resize width crop height

Problem

I am using this code from css tips and tricks to Cover a background image. The problem is that it rescales the image to fit both width and height and changes the aspect ratio. I want the background image to rescale to full screen width and then crop the height only (starting from the top of the image, not the center) to cover the view port. In this way, the image aspect ratio will be maintained.

A secondary problem I have is that it doesn't seem to work unless I use the FQDN for the image instead of just the url below.

html {
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Problem courtesy of: markhorrocks

Solution

Instead of

background-size: cover;

you will want to use

background-size: 100% auto;

Cover will stretch the image to the smallest size such that both its width and its height can fit inside the content area, hence your issue. See more about that over here.

Solution courtesy of: Nit

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

css background image resize width crop height

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×