Как сделать фон на высоту экранна с прокруткой?

Question

[Денис Приходько]

Всем привет. Видел на некоторых сайтах такую фичу: когда зходим на сайт перед нами фонове избражение по рамеру браузера. Но если начать прокрутку, то избражение остается на своем месте и начинается другое либо просто заливка. Я к сожелению по пямяти не могу вспомнить примеры таких сайтов, Так как когда их находил, такой задачи не стояло.
Спасибо.

Answer 1

[Алексей Афанасьев]

CSS свойство background-attachment: fixed; сделает фоновое изображение не подвижным при скролле, а растянуть фоновое изображение background-size: contain;

Answer 2

[Eugene Burmakin]

parallax

Comments

[Денис Приходько]

@Freika Спасибо. Это то, что я искал.

[Денис Приходько]

@Freika Хотя, нет. Мне нужно растянуть изображение на размер окна. Без каких либо эффектов. Можете что-нибудь подсказать еще?

Answer 3

[Сергей Шилов]

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

.layer-1 {
     background: url(img/img.jpg) center center no-repeat; /*задаем картинку фона по центру и не повторяем её*/
    background-size: 100%; /*Растягивает бэкграунд на всю площадь экрана, можно ещё применить св-во cover, но не забудь расставить префиксы*/
     background-attachment: fixed; /*фиксируем бэкграунд при прокрутке*/
     z-index: -1; /*говорим, что он будет невидим под другими слоями*/
}

.layer-2 /*Наезжающий слой снизу*/ {
     background: url(img/img.jpg) center center no-repeat;
     background-size: 100%;
}

Соответственно 2 дива, у которых эти бэкграунды, должны быть width: 100%; height: 100%; - для пущей красивости)
А если вы хотите использовать тру-параллакс с разным движением фона итд, то погуглите ресурс parallax.js