Как можно создать анимированный фон?

Если вы хотите создать анимированный фон без формата GIF, можно использовать CSS3 анимацию или JavaScript.

Используя CSS3 анимацию:
1. Создайте HTML элемент, который будет являться фоном, например, `<div id="background"></div>`.
2. Определите стили для этого элемента, установив ему фоновое изображение и размеры:
```
<style>
    #background {
        background-image: url(ваше_изображение.jpg);
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
    }
</style>
```
3. Создайте анимацию CSS, определив ключевые кадры и перемещение фона:
```
<style>
    @keyframes moveBackground {
        0% {
            background-position: 100% 0;
        }
        100% {
            background-position: -100% 0;
        }
    }
</style>
```
4. Назначьте анимацию фону:
```
<style>
    #background {
        animation: moveBackground 20s linear infinite;
    }
</style>
```
Где `20s` - длительность анимации и `infinite` - бесконечное повторение.

Используя JavaScript:
1. Создайте HTML элемент `<div id="background"></div>`.
2. Определите стили для этого элемента, установив ему фоновое изображение и размеры (аналогично шагу 2 CSS метода).
3. В JavaScript определите функцию, которая будет перемещать фон:
```
<script>
    function moveBackground() {
        var background = document.getElementById('background');
        var position = 100;
        var speed = 1;

        setInterval(function() {
            position -= speed;
            background.style.backgroundPosition = position + '% 0';
        }, 20);
    }

    moveBackground();
</script>
```
В этом примере фон будет перемещаться каждые 20 миллисекунд на 1% влево. Вы можете изменить скорость и промежуток перемещения изменением значений `speed` и `setInterval`.

Для создания контейнера с фоновым изображением, которое будет двигаться горизонтально в цикле, вы можете использовать следующий код CSS:

.scroll-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('your-background-image.jpg') repeat-x;
    animation: scroll 5s linear infinite;  
}

@keyframes scroll {
    from {
        background-position: 0;
    }
    to {
        background-position: 100% 0;
    }
}

Вы должны заменить 'your-background-image.jpg' на путь к вашему фоновому изображению. Вы также можете изменить время анимации, задав значение другого времени вместо 5сек ('5s').

Этот код создаст контейнер с именем ".scroll-container", который будет иметь фон с повторяющимся изображением и анимацию, перемещающую фоновое изображение по горизонтали от 0% до 100%.