Как корректно отобразить фон на всех устройствах в браузере?

Question

[Prepod21]

При превью просмотре в браузере для всех размеров экрана фон заголовка отображается нормально. Когда просматриваю страницу на своем Iphone 6 plus - фон размыт (такое ощущение что изображение не смаштабировалось, а отобразилось как есть и видно только серый размытый фон - часть большого изображения)

.header {
    background-image: url('../../../../static/images/header_background.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

Comments

[Константин]

А ширина у этого .header 100%?

[Prepod21]

Да 100%

Answer 1

[Кирилл Никитин]

iOS браузеры не поддерживают свойство background-attachment: fixed;.
Либо убирайте его, если вам iPhone важны, либо я как-то давно тут отвечал что ещё можно сделать.