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

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

0 голосов
/ 25 ноября 2018

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

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

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

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

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

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 и при необходимости продолжает повторяться до бесконечности.Статическая страница должна отображаться только один раз в самом верху.Какие-либо предложения?Спасибо!

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

1 Ответ

0 голосов
/ 25 ноября 2018

Все работает.Проблема была с 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;
...