CSS: Сделать ссылки на фоновое изображение в отзывчивом navbar отзывчивом и масштабируемом

Question

Работа на сайте parallax для WordPress для клиента, и у меня есть панель навигации со спрайтом, используемым для фонового изображения для каждой ссылки. Здесь вы можете увидеть семь навигационных кнопок (http://www.aishla.com/blog/2014/my-aish-test/). Теперь он отлично выглядит на рабочем столе, но я хочу, чтобы эти изображения реагировали. Другими словами, уменьшайтесь по мере уменьшения дизайна.

Поэтому я думал, что могу использовать настройку фона в CSS, но когда я попытался в своем запросе на медиа, я получаю весь спрайт внутри href, а не только часть изображения, которое я хочу. Поэтому мне интересно, возможно ли это сделать так, или если я застрял, создав серию спрайтов для разных разрешений экрана. Вот пример того, что я использую, чтобы попытаться сделать эту работу:

Прежде настольная версия:

nav ul.sub-nav li a { background-image: url("../aish/images/subnav.gif"); background-repeat: no-repeat; color: #000; float: left; height: auto; margin: 0; padding: 80px 0 0 0 ! important; font-size: 16px;font-weight: 700; text-transform: uppercase; text-align: center; width: 137px; } 
nav ul.sub-nav li:first-child a { background-position: 0px 0px; display: inline; } 
nav ul.sub-nav li:first-child a:hover { background-position: 0px -140px; } 

Теперь медиа Фиоре запрос макс-ширина 768px:

nav ul.sub-nav { float: none; width: 763px; margin: 0 auto; padding: 0; height: auto; list-style-type: none; } 
nav ul.sub-nav li a { background-size: 79.562% 79.562%; padding: 80px 0 0 0 ! important; font-size: 14px; width: 109px; } 
nav ul.sub-nav li:first-child a { background-position: 0px 0px; display: inline; } 

Answer 1

Извините, прокомментируйте комментарий -> вы не можете использовать размер фона: таким образом, поскольку вы говорите, что хотите, чтобы ваш фон составлял 79,562% от ширины навигационной системы ul.sub-nav li a, которая установлена ​​на 137 пикселей, чтобы сделать ваш весь спрайт шириной 108 пикселей, поэтому он выглядит настолько маленьким. если вы хотите иметь хорошие четкие значки для вашего навигатора, я бы просто использовал .svg-изображения, и они будут выглядеть лучше на высоких экранах DPI в любом случае.

Если вы хотите использовать фоновый размер, вам нужно будет рассчитать, сколько раз ваш спрайт вписывается в 137px, и вы получите в итоге> 600%, но ваш спрайт должен быть таким же, как ваш div, и все, что работает, чтобы получить изображения, отличные от hdpi, я бы не рекомендовал.