Статичный бекграунд

Сегодня случайно зашел на сайт
https://11.uisgcon.org/ua

Внизу там есть контент на фоне макбука.

При прокрутке создается ощущение, что задний фон зафиксирован, а прокручивается только лишь контент.

Кто-то может вкратце описать, как такое реализовать?

При помощи z-index и прозрачности блока.
Обрати внимание на элементы

#highlighted-bottom

и

#highlighted-bottom-transparent-bg

Есть блок со стилем:

background: url("images/parallax-bg.jpg") 50% 50% no-repeat fixed;
margin: -1px 0 0 0;
position: relative;
z-index: 2;

Большая часть страницы имеет фон белый, поэтому нам фон не видно.
Там где нам видно фиксированный фон, страница имеет прозрачный фон.

Спасибо) Вроди бы разобрался)

Немного не понятно с

здесь контейнеру id="highlighted-bottom-transparent-bg" задается инлайновый стиль с прозрачностью 80%.

style="background-color: rgba(255, 255, 255, 0.8);"

Ведь именно этот слить и делает еффект прозрачности картинки?
Другими словами, это просто fixed бекграунд-картинка, воровненная по центру с наложенным 80%-м белым слоем. Я верно понял?

Интересная верстка)

такой вариант работает:

background-image: url("somepicture.jpg");
background-attachment: fixed;
background-size: cover;
background-position: center center;

вот для наглядности http://katedreamer.github.io/works/cabanawp/index.html

1 симпатия

Да, все верно.

если я не ошибаюсь то этот эффект называться паралаксом (parallax) - вот сборная статья на хабре.