@WebNerd
It's time to hunt

С каким разрешением подключать изображение к background у header, если header тянется на всю высоту?

Есть сайт, где header растягивается на всю ширину и высоту экрана на любом устройстве. Так вот, есть одна проблема, если мы возьмем среднюю + оптимизированную картинку для всех экранов, то при hd 1920x1080, она будет выдавать отвратительное качество. Однако, если мы возьмем картинку в 1920 на 1980, то тогда она будет долго подгружаться на всяких мобилках, да и вообще это извращение какое-то.

Какие есть варианты для решения этой проблемы? Лично мне приходит только 1, а именно использовать media.
  • Вопрос задан
  • 120 просмотров
Решения вопроса 1
@Kanonier8
Ну разумеется для таких кейсов вы можете использовать media query

header {
	background: url(./mobile_bg.jpg);
}
@media screen and (min-width: 750px) {
	header { 
		background: url(./tablet_bg.jpg);
	}
}
@media screen and (min-width: 992px) {
	header { 
		background: url(./desktop_bg.jpg);
	}
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
23 нояб. 2024, в 01:31
1000 руб./за проект
23 нояб. 2024, в 00:16
2000 руб./за проект
22 нояб. 2024, в 23:55
3000 руб./за проект