Как сделать параллакс эффект CSS

Как сделать параллакс эффект CSS

Чтобы сделать параллакс эффект, можно использовать свойство background-attachment со значением fixed и добавить дополнительный div для того, чтобы добавить затемнение.

Пример

Lorem Ipsum

HTML


<div class="bg-ex-parallax">
 <span>Lorem Ipsum</span>
 <div class="parallax-overlay"></div>
</div>

CSS


.bg-ex-parallax { 
  background: url(image.jpg); /* Путь к картинке */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}
.bg-ex-parallax .parallax-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6); /* Прозрачность */
  z-index: 2;
}
.bg-ex-parallax span {
    z-index: 3;
}
By julia