Each of my `li` elements has a background image which I wanted to make responsive by using `background-size:contain;` But it does not work as expected which you can see live [here](http://demo.lumierebd.com/test/) ( you can get the responsive view tester by pressing Ctrl+Shift+m in Firefox while you are on that page ). 

HTML:

```
<div class="menu">

    <ul class="menu_ul">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>

    </ul>

</div>

```

CSS:

```
<style>

    body{

        width:50%;
        margin: 0 auto;
        border:1px solid red;
    }
    .menu{

        width:36%;
    }
    .menu ul{
        border:1px solid red;
        margin: 0;
        padding: 0;
    }
    .menu li{

        list-style: none;
        margin-bottom: 2px;
        color:#ffffff;
        background-image: url("img/bg1.png");
        background-repeat:no-repeat;
        background-size:contain;
        background-position:center;
        text-align: center;
    } 
    .menu li:hover{

        background-image: url("img/bg2.png");
    }

</style>

```

How to make it responsive anyway ?