Crop background-image using CSS

Question

I have a background-image on the body tag which is around 500px high. This is fine for the index page, however on other pages it does not look right. I want to be able to crop the background-image on other pages to around 300px high, but still using the background-image in the body tag.

Is this possible using just CSS?

Answer 1

Make bg image 300px height, not crop, but scale:

background-size: auto 300px;

But you can't crop to an area smaller than the tag where background is set. You have to write a tag inside with the desired height set bagground there and then crop:

 background-size: cover;

Answer 2

background-size http://www.css3.info/preview/background-size/