Bootstrap Endless Background Image

Question

В этом макете: choose Agency-Demo, они используют полноэкранное фоновое изображение. И когда вы начинаете прокручивать, фон накладывается содержимым (контейнеры div). При прокрутке вы можете видеть, что фон меняется и снова накладывается следующим контентом.

Как найти правильное положение для контента в зависимости от размера экрана устройства?

И как они добавляют разные классы в зависимости от высоты прокрутки?

Возможно ли это с помощью стандартных функций загрузки?

Answer 1

Агентство-Demo использует селектор крышки css. Ключевое слово cover указывает, что фоновое изображение должно масштабироваться как можно меньше, обеспечивая при этом оба его размера. Результаты: • Заполняет всю страницу с изображением, не белое пространство • не весы изображения при необходимости • Сохраняет пропорции изображения (соотношение сторон) • Изображение центрируется на странице • Не вызывает скроллбары • Как кросс-совместимый браузер, как возможно • не некоторые фантазии махинаций, как Flash,

.demo-header { 
text-align: center; 
background: url('assets/img/bg-header.jpg') no-repeat center center scroll; 
color: #fff; 
-webkit-background-size: cover; 
background: cover; 
padding: 100px 0; 
} 

Для перекрестной совместимости браузера можно использовать следующий код.

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