Как правильно позиционировать фон сайта, взятый из CSS спрайта?

Question

[Юрий Ерусалимский]

Для ускорения загрузки сайта я выбрал CSS спрайт. То есть, все картинки сайта помещены в одну большую, их использую с помощью background-position, выставляю место того или иного куска. Появилась следующая проблема - в спрайте у меня хранится картинка общего фона, который, по задумке, должен маштабироваться на весь экран. Под ним, естественно, находятся уже другие картинки, к фону не относящиеся. При тестировании на разных устройствах моего сайта возникает следующая ситуация - если смотреть на сайт с мобильного телефона в вертикальной ориентации, то изначально вертикальный фон расширяется на всю ширину области браузера благодаря background-size: cover, но при этом, естественно, начинают отображаться все картинки под ним, ибо изначально фон горизонтальный, а я проверяю на вертикальном устройстве в данном случае. Поэтому вопрос - как решить эту проблему? Я подозреваю, что можно выставить фиксированную высоту той фоновой картинки, чтобы больше контейнер не становился, но проблема в том, что на вертикальном (читайте, "узком") экране вся информация в блоке может не уместиться, поэтому растягивается вниз.

Comments

[Сергей]

Узреть на ресурсах типо кодпен или жсфидл можем?

Answer 1

[devstudent]

уберите фон из спрайта в отдельный файл, спрайт используйте только для маленьких изображений.