Как сделать бесконечный фон сайта с одной стороны?

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

1. Сначала определите фоновое изображение, которое вы хотите использовать для фона. Вы можете выбрать любое изображение, которое вам нравится, или создать специальное изображение, предназначенное для бесконечного эффекта фона.

2. Далее создайте основной стиль секции, где будете использовать бесконечный фон. Например:

<section class="infinite-background"></section>

3. Примените стили для этой секции в CSS файле:

.infinite-background {
   background-image: url('путь_к_вашему_изображению');
   background-repeat: repeat-x; /* Повторять изображение только по горизонтали */
   background-attachment: fixed; /* Фиксировать фон, чтобы он оставался на месте при прокрутке */
   height: 100vh; /* Задайте высоту секции, чтобы соответствовать высоте окна просмотра */
}

4. Чтобы создать эффект бесконечного фона, добавьте псевдоэлемент :before с отдельными стилями. Это позволит сделать переход между началом и концом фона с использованием плавного градиента.

.infinite-background:before {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   left: -100%; /* начальное положение псевдоэлемента - за пределами экрана слева */
   right: 0;
   background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3), transparent); /* градиентный переход от прозрачного к серому с использованием эффекта затухания */
   z-index: -1; /* установите меньший z-index, чтобы псевдоэлемент был под основной секцией */
   animation: infinite-background-animation 20s linear infinite; /* анимация для создания эффекта плавного перемещения псевдоэлемента */
}

@keyframes infinite-background-animation {
   0% {
      transform: translateX(0); /* начальная позиция псевдоэлемента */
   }
   100% {
      transform: translateX(100%); /* конечная позиция псевдоэлемента, когда он полностью скрыт */
   }
}

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