Проблема с изменением размера фонового изображения div с CSS

Question

Я работаю над черновым вариантом моего сайта, который использует более отзывчивый дизайн, чем оригинал, и столкнулся с проблемой, из-за которой изменились размеры кнопок навигации в браузере CSS. Я могу получить divs для изменения размера, но не самих изображений .png.

Ниже приведен код кнопки «Главная». Я установил div для изменения размера до 11,5%, потому что когда он отображается рядом с другими кнопками, все они имеют уникальные размеры и прекрасно вписываются в родительский div.

Любая помощь очень ценится :) Спасибо за внимание!

#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

Пробег: background-size: cover;.

Cover Это ключевое слово указывает, что фоновое изображение должно быть соизмеримо быть как можно меньше, обеспечивая при этом и его размеры больше или равны соответствующим размерам фона области позиционирования.

Answer 2

В комментарии 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; 

    }