Прокрутка вебсайта за пределы

Question

Я заметил, что если попытаться пролистать вебсайт наверх, когда выше уже ничего нет, то над шапкой появится пустое пространство, как на картинке ниже. Так вот вопрос, могу ли я на своём сайте с помощью html/css/js сделать так чтобы в этом месте появлялась картинка? Желательно чтобы она не могла развернуться на неограниченную высоту.

Пока-что единственный вариант, который я нашёл, как повлиять на содержимое нового пространства - изменить background тега body. Но это повлияет на весь сайт. Если создать новый элемент и задать ему position: fixed, то всё его содержимое выше 0 по y будет обрезаться.

Answer 1

Делаем внутренний элемент, который будет корневым, и все остальные элементы будут содержаться в нём. Задаём body тайный background, обязательно указываем repeat. Элементу #root тот background, который будет виден всем пользователям. И вуаля, теперь пользователи будут видеть смешную картинку если как-то смогут заглянуть за пределы сайта.

body {
        background: url("https://sun9-63.userapi.com/impf/c855636/v855636410/6a2c5/8ixqqs-16Mo.jpg?size=242x228&quality=96&sign=d8fd6c8021f877c249fa9afa1c1550be&type=album") repeat;
        min-height: 100vh;
        min-width: 100vw;
        margin: 0;
        padding: 0;
    }
    #root {
        background: #00ff00;
        min-height: 100vh;
        min-width: 100vw;
        height: 100%;
        width: 100%;
    }

<body>
<div id="root">
    AAAAAA
</div>
</body>

Answer 2

Идея в том чтоб сделать изображение под высоту топбара и под ним поставить изображение. Ниже топбара обычный фон body.

Красный -топбар
розовый - картинка
зеленый - фон страницы

UPD: проверил, изображение прыгает при прокрутке а зеленая заливка остается

Вариант не работающий

*{
  padding:0;
  margin: 0;
}
body{
      background: center top / 100% 80px no-repeat url(http://i.imgur.com/9HMnxKs.png), green;
}
.header{
  position: fixed;
  top:0;
  width: 100%;
  height: 80px;
  background-color: red;
}

<div class="header"></div>

БЛОГ НА HUSL

Прокрутка вебсайта за пределы

Ответы (2 шт):