Как сделать картинку растянутой на всю ширину и высоту окна, чтобы при этом при скролле она осталась на том же месте?

Question

[istasiik]

Вот есть картинка, нужно сделать так, чтобы при открытии страницы ее ширина и высота была равна ширине и высоте монитора. Но при этом если прокрутить экран - она там и останется? Вот, что я имею ввиду: https://medium.com/@melodyquintana/design-with-man...
P.S. Методами CSS и HTML

Answer 1

[chupok]

Логика простая:
1. Для блока определяем размеры, соответствующие экрану.
2. Устанавливаем фоновое изображение и фиксируем его.

<div class="home">
	...
</div>

На чистом CSS:

html, body {
height: 100%;
position: relative;
width: 100%;
}
.home {
background: url("../images/content/home.jpg") center no-repeat fixed;
height: 100%;
position: relative;
width: 100%;
-khtml-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}

Если высоту блока по каким-либо причинам нельзя задавать через CSS, то JQuery - в помощь (при этом в CSS-файле не нужно указывать высоту html, body и блока с классом home):

$(document).ready(
    function(){
        $(window).resize(function(){
            var height = $(window).height();
            $('.home').css({
                'height':height
            });
        }).resize();
    }
);

Comments

[istasiik]

Спасибо за то, что так подробно расписали!

[chupok]

Да не за что.)

Answer 2

[Егор Трауров]

Омг..
width: 100%;
height: 100%;
Не?

Comments

[istasiik]

Да, глупый вопрос, спасибо!

[Sn0wSky]

При таком задании у картинки будет меняться соотношение сторон. Лучше всего как нише написали. Берете div, с width: 100%; height 100%; bacgkround-image: url('vasha kartinka'); background-size: cover; (тут еще несколько аналогов для кроссбраузерности)