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

Question

[Andrey_nk]

Растягиваю фон по ширине экрана, прописал стили :

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

Answer 1

[roliyarnik]

Самое нормальное решение

Comments

[Алексей]

Я это и написал собственно, 2 года назад)

Answer 2

[Алексей]

Стили позиционирования убрали, но на разрешении 1920x1080 как-то слишком все увеличивается, что не влазит в экран. При в принципе таком скромном количестве отображаемого материала, хорошо бы уместить все в один экран, без прокрутки.

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

То есть просто прописать:

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

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