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

Question

[freestm]

Картинка должна занимать всю площадь браузера по ширине. Вот только если человек откроет сайт на мониторе 4к, то где ж такую картинку найти...какие есть решения для людей с большим разрешением?

Comments

[indigo_style]

Сразу же устанавливать изображение с таким разрешением

[Нерон Лордов]

indigo_style: но тогда она будет весить много

[indigo_style]

Nekto_Habr: Я не силен в оптимизации изображений, ну есть же сервисы и программы по сжатию

Answer 1

[Valmih]

Попробуй как то так
background-attachment: fixed;
background-image: url("../img/bcg.png");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;

Answer 2

[Дмитрий Христоев]

imulus.github.io/retinajs

Answer 3

[Halcod]

Наверняка у вас есть ограниченная максимальная ширина колонки сайта (контейнер) в котором содержится шапка,например 1170px
Именно этой ширине и соответствует картинка и шире она не станет.(если все правильно)
Если она выпадает из общей колонки сайта и вам это и нужно(вас это устраивает?) то как вариант вам предложили retinajs.
Но обычно шапки имеют ограниченную ширину.