Как растянуть фон по ширине экрана background-size: cover?

Растягиваю фон по ширине экрана, прописал стили :
body
{
background:url(images/bg2.jpg) center 100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover; 
}

Всё работает на среднем разрешении, но когда выводится на широкоэкранном мониторе, картинка начинает убегать вверх, с чем это может быть связано и как можно вылечить?

Посмотреть можно здесь:
magazin.mudrostlubvi.com
  • Вопрос задан
  • 30627 просмотров
Пригласить эксперта
Ответы на вопрос 2
@roliyarnik
Самое нормальное решение
Ответ написан
algreenzer
@algreenzer
Я в этом шарю
Стили позиционирования убрали, но на разрешении 1920x1080 как-то слишком все увеличивается, что не влазит в экран. При в принципе таком скромном количестве отображаемого материала, хорошо бы уместить все в один экран, без прокрутки.

Советую вообще не использовать background-size: cover;
А сделать бэкграунд таким образом, чтобы на широкоформатных экранах он центрировался, а остальное поле заполнял фоновый цвет. Для этого нужно сделать, чтобы фоновое изображение по краям соответствовало фоновому цвету, тогда не будет заметно границ.

То есть просто прописать:
background: url(images/bg2.jpg) 50% 0 no-repeat #цвет; //По центру вверху
/* или */
background: url(images/bg2.jpg) 50% 100px no-repeat #цвет; //По центру с отступом сверху 100px

А для остального задать центрирование и разумное увеличение, через @media
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы