Как сделать фоновое изображение подходящим для всей страницы без повторения с помощью простого css?

У меня есть JPG-изображение размером 1024 x 724. Размер моей страницы не фиксирован. Мое требование: Если я изменил размер страницы, то фоновое изображение также должно быть изменено и соответствовать странице.

Также я не хочу содержать информацию, связанную с изображением, на моей странице Html/JSP. Я хочу сделать это, используя простой CSS. Я не использую CSS3. Потому что есть атрибут background-size, который может сделать изображение растянутым на ширину и высоту страницы. В настоящее время поддерживается только Google Chrome. Любая помощь?

Ответ 1

Вы не можете изменять размер фоновых изображений с помощью CSS2.

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

<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
  <img src='whatever.jpg' style='width:100%;height:100%' alt='[]' />
</div>

Таким образом, div будет сидеть за страницей и занимать все пространство, изменяя при необходимости. img внутри будет автоматически изменяться в соответствии с div.

Ответ 2

попробуйте что-то вроде

background: url(bgimage.jpg) no-repeat;
background-size: 100%;

Ответ 3

Вы можете использовать JavaScript или CSS3.

Решение для JavaScript: Используйте абсолютный позиционированный тег <img> и изменяйте его размер при загрузке страницы и при изменении размера страницы. Будьте осторожны с возможными ошибками при попытке получить размер страницы/окна.

Решение CSS3: Используйте свойство CSS3 background-size. Вы можете использовать либо 100% 100%, либо contain или cover, в зависимости от того, как вы хотите изменить размер изображения. Конечно, это работает только в современных браузерах.

Ответ 4

В зависимости от того, какое изображение у вас есть, было бы лучше переделать дизайн так, чтобы основное изображение исчезло до заданного сплошного цвета или повторяемого рисунка. Если вы центрируете изображение на странице и имеете сплошной цвет в качестве backgroud.

См. http://www.webdesignerwall.com/trends/80-large-background-websites/ для примеров сайтов с использованием больших или масштабируемых фонов.

Ответ 5

background: url (bgimage.jpg) no-repeat; background-size: cover;

Это сделало трюк

Ответ 6

Все эти три линии работали для меня.

background-image: url("pages/images/backImage.png");
background-size: 100%;
background-repeat: no-repeat;