Создаем паралакс фон для сайта

[kirilljsx]

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

Вариантов как сделать паралакс на самом деле много, но я возьму один из своих любимых который частенько использую из раза в раз.

И так у нас есть наш контент, нам необходимо его обернуть, в моем примере это <div class="paral">

<div class="paral">
   <div class="container">
        <!-- Контент -->
   </div>
</div>

И теперь пишем нехитрый css с использованием :befor вот так:

.paral-before::before {
    content: " ";
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
    will-change: transform;
    z-index: -1;
    background-size: contain;
    background: url(/assets/images/bg.webp) center center / cover no-repeat;
}

Коротко, обратим внимание на css, обязательно ставим content: " "; иначе не будет работать!
Ну а остальные стили надеюсь вы знаете, а если не знаете - идите учите