@AndrewRusinas

Как правильно работать с фоновыми изображениями для высоких разрешений?

Привет!
Появилась задача сделать на главной блок на всю ширину и высоту экрана с фоновой картинкой, примерно как у

Хочется, чтобы изображение было нормальным на высоких разрешениях (4к), но не хочется грузить мегебайтные исходники, особенно, если юзер не с 4к.
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
IonDen
@IonDen
JavaScript developer. IonDen.com
Mobile first media query.

По мере увеличения разрешения грузить большее изображение.

Примерно так:
.body {
    background-image: SMALL
}

@media (min-width: 1000px) {
    .body {
        background-image: BIG
    }
}

@media (min-width: 2000px) {
    .body {
        background-image: SUPER_BIG
    }
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
KickeRocK
@KickeRocK
FrontFinish
Это помогает
Ответ написан
dom1n1k
@dom1n1k
https://css-tricks.com/snippets/css/retina-display...
Статья относительно старая, сейчас часть префиксов можно выпилить, но общая схема та же.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
22 янв. 2021, в 03:22
3000 руб./за проект
22 янв. 2021, в 02:27
15000 руб./за проект
22 янв. 2021, в 02:25
15000 руб./за проект