Изменение изображения при прокрутке

#html #css

Как можно реализовать вот такую штуку: на сайте http://ginza.ru/msk в самом низу
после "еще новости" - при прокрутке страницы изображение тоже прокручивается?


    

Ответы

Ответ 1

Можно открыть страницу в developer tools и посмотреть:  

.row-header-main-footer-picture {
    background-image: url([путь-к-картинке]);
    background-position: 50% 50%;
    background-attachment: fixed;
    background-size: cover;
}


как видите фоновая картинка сделана с background-attachment: fixed;. Это заставляет
картинку "стоять на месте" при прокрутке страницы. А сверху на нее наложены два блока,
один с прозрачным фоном (тот, где дата-лого-телефон), второй с белым фоном (заказать
доставка-поделитесь отзывом).
Но главное- фон стоит на месте при прокрутке.

Еще раз - воспользуйтесь developer tools любого браузера.