Задать вопрос
werber
@werber
Системный администратор Windows

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

Для ускорения загрузки сайта я выбрал CSS спрайт. То есть, все картинки сайта помещены в одну большую, их использую с помощью background-position, выставляю место того или иного куска. Появилась следующая проблема - в спрайте у меня хранится картинка общего фона, который, по задумке, должен маштабироваться на весь экран. Под ним, естественно, находятся уже другие картинки, к фону не относящиеся. При тестировании на разных устройствах моего сайта возникает следующая ситуация - если смотреть на сайт с мобильного телефона в вертикальной ориентации, то изначально вертикальный фон расширяется на всю ширину области браузера благодаря background-size: cover, но при этом, естественно, начинают отображаться все картинки под ним, ибо изначально фон горизонтальный, а я проверяю на вертикальном устройстве в данном случае. Поэтому вопрос - как решить эту проблему? Я подозреваю, что можно выставить фиксированную высоту той фоновой картинки, чтобы больше контейнер не становился, но проблема в том, что на вертикальном (читайте, "узком") экране вся информация в блоке может не уместиться, поэтому растягивается вниз.
  • Вопрос задан
  • 166 просмотров
Подписаться 1 Оценить 1 комментарий
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Пригласить эксперта
Ответы на вопрос 1
@devstudent
frontend-developer
уберите фон из спрайта в отдельный файл, спрайт используйте только для маленьких изображений.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы