Теперь перейдём к сути работы спрайта:

• раз спрайт объединяет все картинки, то и всем блокам-контейнерам спрайта нужно задать одно и то же фоновое изображение;
• но в разных блоках нужно показать разные части спрайта;
• для этого нужно сместить фоновое изображение с помощью background-position так, чтобы в каждый блок помещался нужный фрагмент фоновой картинки.

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

Не обязательно подгонять размеры контейнера под размеры картинки в спрайте. Например, для иконок преимуществ мы подобрали максимальные размеры иконок по горизонтали и вертикали.

Чтобы завершить блок преимуществ, осталось только задать координаты фоновых картинок в псевдоэлементах, удалить лишние фоны и полупрозрачность и, конечно же, удалить отдельные фоновые картинки иконок.

Поздравляем! Мы уменьшили количество запросов к серверу на два. Чем больше картинок из спрайта вы используете на странице, тем больше запросов сэкономите.

Но помните главное: контентные картинки в спрайт объединять нельзя, ведь спрайт — это фон.