Question

I have 3 list-items with background-images that are contained inside a div that has a max-width, what I am trying to do is scale the list-item dimensions as the window is resized but as yet i am having no luck doing this. I have tried just setting percentage height and width also have tried using background-size. Can anyone suggest how I can achieve this?

CSS

​#test{max-width:302px;width:100%;}
#test li{background:url('http://www.dummyimage.com/100/000/fff') no-repeat 0 0;max-width:100px;width:100%;height:100%;background-size:100% auto;float:left;margin-left:1px;}
#test li:first-child{margin-left:0;}

HTML

​<ul id="test">
    <li></li>
    <li></li>
    <li></li>
</ul>​​​​​​​​​​​​​​​​​​​​​​​​​​

Answer 1

Change the width of #test li to a percentage value!
http://jsfiddle.net/baGuZ/