Question

Come a bit unstuck here.

I’ve got a div thats approx. 2000px wide by 800px tall.

Inside that div I have another div, with a background image.

I want the internal div, to take 80% height of the parent container, and for the width to keep proportion with the height, so the background image doesn’t distort, if this makes sense?

Im using CSS3 to scale the background image 100% both x and y.

.internal-box {
    background:url(images/elevator.png) repeat scroll 0 0 transparent;
    background-size:100% 100%;
    height: 80%;
    width: auto;
}

http://jsfiddle.net/JbmE6/

Answer 1

Try this:

background-size: contain;
background-repeat: no-repeat;   

However note that this might not be fully supported in all browsers such as IE8.

Also note that this doesn’t make the <div> itself any smaller, it only makes the background image appear in only the relevant portion. If you put a border on .small you will see in fact it is 100% width of its container.