Как сохранить фиксированный размер фонового изображения, даже если страница увеличена или уменьшена?

Question

У меня есть изображение, которое я хочу установить в качестве фона с размерами 1x700.

Это изображение градиентного типа, поэтому мне нужно repeat-x.

Основная проблема, с которой я столкнулся, заключается в том, что изображение не заполняет всю страницу.Это, однако, остается фиксированным.В частности, когда я прокручиваю, я вижу, что изображение не заполняет всю страницу.

Код, который у меня есть, работает в Firefox и Chrome, но не в IE9.Я также применяю этот скин для dotnetnuke, если это имеет какое-либо значение.

Вот мой код:

body 
{   
    background-image: url('images/bg.jpg');
    background-attachment: fixed;
    background-repeat: repeat-x;
    background-size: contain;
    -moz-background-size: contain;
}

Answer 1

Не уверен, правильно ли я понимаю:

Чтобы разместить изображение на весь экран, используйте свойство CSS:

background-size:100% 100%;

Однако обратите внимание, что изображение будет растягиваться, если размер будет неправильным

Answer 2

ПРЕДУПРЕЖДЕНИЕ

Избегайте путаницы с масштабированием браузера или другими функциями, связанными с браузером, поскольку это может снизить удобство работы пользователя, особенно для пользователей, которые полагаются на такие функции своего любимого браузера!

---

Тем не менее, я знаю, что единственный способ для элемента сохранять свой размер независимо от масштабирования браузера - это использовать элемент контейнера, чтобы занимать весь экран, и внутренний элемент, чтобы иметь процентные меры,как это.

http://jsfiddle.net/yLFj8/4/

Answer 3

Удалите CSS, и это должно работать.Это должно быть все, что вам нужно.

body {
  background-image: url('images/bg.jpg');
  background-repeat: repeat-x;
}

Смотрите мой пример здесь

http://jsfiddle.net/jasongennaro/fSG7j/1/