Question

I want to resize an image so that it takes up 100% width of the page and 40% of its height but without distorting the image’s natural ratios.

I came across this tutorial but I can’t seem to get it to work with percentage values rather than just pixel or em values.

Any ideas how this might be done? Much thanks.

Answer 1

This seemed to work better:

div{
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 40%;
 background:url(images/background.jpg) no-repeat;
 -moz-background-size:100% auto;
 -webkit-background-size:100% auto;
 background-size:100% auto;
}

But thanks so much for guiding me to the right place!