Cropping image as a percentage with CSS

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 than开发者_运维百科ks.

you can use css3 background-size property for this:

div{
 background:url(image.jpg) no-repeat;
 -moz-background-size:100% 40%;
 -webkit-background-size:100% 40%;
 background-size:100% 40%;
}

& if you do not want to distort the image then write like this:

div{
     background:url(image.jpg) repeat-x;
     -moz-background-size:auto 40%;
     -webkit-background-size:auto 40%;
     background-size:auto 40%;
    }

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!