CSS background-repeat with multiple images

Question

How can I use background-repeat with multiple images? The primary background image is static and only sits at the top of the unscrolled page.

Once the user starts to scroll down on longer pages, there is a secondary background image than blends in with the first image.

This image repeats infinitely (if necessary) for long pages.

How can I do this?

This is what I have tried:

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;

The static.png background page is on top and displays from 0 to 600px. The repeat.png then starts at 600px and keeps repeating down to infinity if necessary. The static page should only display once at the very top. Any suggestions? Thank you!

I think one big problem is, background-repeat is only applied once and to both images.

Answer 1

Got everything working. The issue was with the background-position. I did not understand the syntax. 600px from the left and align to the top is what it says in the above example. I thought its meant 600px from the top. When I tried using the real number it was putting the image way off the screen at right making it feel like it wasn't working. I understand the syntax now and all is working perfectly. Thanks!

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;