Как получить нефиксированное полноэкранное фоновое изображение?

Question

Мне известно, что существует несколько методов для создания полноэкранного фонового изображения, либо с CSS3, либо с абсолютным позиционированием и 100% высотой / шириной.

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

Возможно ли использовать фоновое изображение в ширину / высоту страницы вместо экрана ?

Answer 1

У меня была та же проблема, что и при создании полноэкранного слайд-шоу: фиксированное положение заставляет изображения оставаться на месте при скольжении содержащего элемента вместо того, чтобы позволить им скользить с этим элементом ...

Я много пробовалВременное решение с использованием этих методов :

• Техника только для CSS # 1: отлично работает с положением, установленным относительно, но не центрирует изображение по вертикали.

• Удивительный, простой, прогрессивный CSS3 Путь: я напрасно попробовал все возможности, прежде чем понять, что не заполнение значения позиции работает (действительно потрясающе)!

  html { 
      background: url(images/bg.jpg) no-repeat center center; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  

Answer 2

Проблема такого подхода в том, что вы никогда не сможете угадать, насколько большим будет ваш контент;1000 пикселей?10000 пикселей?представьте, что вы растягиваете такое большое изображение, если вы решите использовать огромное изображение, это замедлит загрузку вашей страницы или если вы решите использовать изображение разумного размера, оно будет очень сильно искажаться, если выходит за его пределы.

Возьмем это, к примеру, и соответственно увеличим количество контента и посмотрим, как искажается фоновое изображение: http://jsfiddle.net/andresilich/75Sfp/

Answer 3

Я бы указал вам на плагин jQuery backstretch , чтобы добавить эту функциональность на вашу страницу.Связанная страница показывает, как содержимое остается фиксированным и масштабируется в соответствии с шириной / высотой браузера.

edit

Я не совсем уверен, как бы я реализовалтакое решение;я думаю, что вам, возможно, придется использовать javascript, так как вы не можете узнать размер вашего контента до его загрузки.Вот как я бы это попробовал:

• вычислить размер контента после загрузки
• установить растяжение фонового изображения до размера контента
• связать какую-нибудь функцию, которая повторяетсяэто относится к любому изменению размера браузера

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

Answer 4

Предположим, вам нужен заголовок с переменным размером изображения на вашем сайте (который занимает всю высоту)

Внутри вашего заголовка добавьте ID или класс с любым именем, которое вы хотите.

Я приму это как (id="test")

Теперь перейдите к связанному файлу JS и вставьте его ..

var x = screen.availHeight + "px";
console.log(x)

document.getElementById("test").style.height = x;