Issue resizing a div background image with CSS

Question

I am working on a draft version of my website which uses a more responsive design than the original and have encountered a problem making my CSS rollover effect navbar buttons resize properly. I can get the divs to resize ok but not the .png images themselves.

Below is the code for the "Home" button. I set the div to resize to 11.5% because when it is displayed next to the other buttons they all have unique sizes and fit nicely within the parent div.

Any help much appreciated :) thanks for looking!

#homebut
{
display:inline-block;
width:158px;
height:40px;
max-width:11.5%;
max-height:100%;
text-align:center;
background:url(images/buttons/wawhomeroll.png) no-repeat 0 0;
background-position:center top;
background-size:auto;


}

#homebut:hover
{
background-position:0 -40px;
background-position:center bottom;

}

#homebut: span
{
position:absolute;
top: -999em;

}

Answer 1

As comments background-size:100% auto;

#homebut {
   display:inline-block;
   width:158px;
   height:40px;
   max-width:11.5%;
   max-height:100%;
   text-align:center;
   background:url(images/buttons/wawhomeroll.png) no-repeat 0 0;
   background-position:center top;

   background-size:100% auto;

  }

Answer 2

Try background-size: cover; .

Cover This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.