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;
}

/

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/JbmE6/

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 5, 2013 at 11:59 Liam asked Feb 5, 2013 at 11:52 LiamLiam 9,8634040 gold badges114114 silver badges214214 bronze badges 3

• 3 Please clarify your question and maybe add a jsfiddle example for us to test our solutions. – kleinfreund Commented Feb 5, 2013 at 11:55
• Ive added a fiddle @asifsid88, Hopefully the ment explains better. – Liam Commented Feb 5, 2013 at 11:59
• zenelements./blog/css3-background-images – salexch Commented Feb 5, 2013 at 12:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.