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

Я знаю, что есть several techniques, чтобы иметь полноэкранное фоновое изображение с CSS3 или с абсолютным позиционированием и 100% высоты/ширины.Как получить нефиксированное полноэкранное фоновое изображение?

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

Можно ли иметь фоновое изображение stetch к ширине/высоте страницы, вместо экрана?

источник

2011-07-20 Wookai

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

Я пробовал много обходной путь с помощью those techniques:

CSS-Only Метод № 1: отлично работает с позиции установлен relativ e, но не центрирует изображение вертикально.
Удивительный, легкий, прогрессивный способ 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; 
} 
```

источник

2012-11-23 10:39:30 kamah

Спасибо большое! Я не видел вашего ответа, он отлично работает! – Wookai

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

редактировать

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

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

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

источник

2011-07-20 07:26:48 samy

Это то, что я уже знаю, как это сделать. Я ищу, чтобы фон был растянут на ** странице **, а не на экране. В демонстрации предложенного сценария вы можете видеть, что фоновое изображение не перемещается при прокрутке. Я хочу, чтобы он перемещался, т. Е. Был похож на остальную часть страницы. – Wookai

Извините, мой плохой, я неправильно понял: отредактировал мой ответ – samy

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

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

источник

2011-07-20 23:27:09

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

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

Я хочу, чтобы он растянулся. Все в порядке, если оно немного искажено. Как в вашем примере, но и для всей страницы, а не только для div. – Wookai

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

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

Я воспринимаю это как (id="test")

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

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

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

источник

2018-02-25 14:29:21 NoobieSatan

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

ответ

Смежные вопросы