CSS - Stretch фонового изображения

Question

Я пытаюсь получить подобный эффект фона вот на этом сайте:

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

Я попытался сделать изображение, подобное изображенному в примере, и использовал background-size:cover, но когда я прокручиваю вниз, изображение остается статическим и просто прокручивается содержимое. Если это имеет смысл вообще!

Посмотрев пример, может ли кто-нибудь объяснить, что такое CSS для достижения этого? А также, каков должен быть размер изображения (в PS), чтобы он мог растягиваться в больших браузерах без потери качества?

Я попытался посмотреть файл CSS на веб-сайте, чтобы узнать, что происходит, но все это на одной линии и запутывает работу.

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

Большое спасибо заранее.

Answer 1

Похоже, что фон использует CSS:

background:#000000 url(<img>) no-repeat scroll center top; 

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

Чтобы увидеть этот эффект, используя хром, изменить CSS на:

background:#00FF00 url(<img>) no-repeat scroll center top; 

, и вы увидите, что происходит.