CSS background-repeat с несколькими изображениями

Question

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

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

Это изображение повторяется бесконечно (при необходимости) для длинных страниц.

Как я могу это сделать?

Вот что я попробовал:

background-image:
    url(../images/background/large/static.png),
    url(../images/background/large/repeat.png);
background-repeat:
    no-repeat,
    repeat-y;
background-position:
    0px top,
    600px top;

Фоновая страница static.png находится сверху и отображает от 0 до 600 пикселей. Затем repeat.png начинается с 600px и при необходимости продолжает повторяться до бесконечности. Статическая страница должна отображаться только один раз в самом верху. Какие-либо предложения? Спасибо!

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

Answer 1

Все работает. Проблема была с background-position. Я не понял синтаксис. 600px слева и выравнивание по верху - это то, что сказано в примере выше. Я думал, что это означало 600 пикселей сверху. Когда я пытался использовать действительное число, оно выводило изображение с экрана справа, создавая впечатление, что оно не работает. Теперь я понимаю синтаксис, и все работает отлично. Спасибо!

background-image:
    url(../images/background/large/static.png),
    url(../images/background/large/repeat.png);
background-repeat:
    no-repeat,
    repeat-y;
background-position:
    left top,
    left 600px;