CSS: Исправлены фоновые изображения выше браузера.

Question

У меня есть большое фото (940x1210) в качестве фонового изображения для #page div, которое обтекает весь контент на сайте. Поскольку фотография - выстрел в голову, он выглядит довольно глупым черепицей, поэтому я поставил его не повторять и позиционировал его на 0,0.

Когда содержимое, заключенное в #page, превышает 1210 пикселей, а фоновое изображение настроено на прокрутку, фотография прокручивается из поля зрения, но если она исправлена, отображается только часть изображения, отображаемого первоначально в окне просмотра браузера - либо верхняя половина (фиксированная верхняя левая), либо нижняя половина (фиксированное нижнее левое положение).

Возникает вопрос: как исправить фоновое изображение в нижней части # страницы (или тела), прокручивая всю высоту изображения до тех пор, пока я не дойду до дна?

Answer 1

Поскольку вы хотите изменить поведение фонового изображения в качестве пользовательских прокруток, вам нужно использовать событие onscroll Javascript.

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

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