1

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.

vsync
  • 118,978
  • 58
  • 307
  • 400
Atomiklan
  • 5,164
  • 11
  • 40
  • 62
  • you mean both background are repeating? are you able to show us a working code with real image and some HTML – Temani Afif Nov 25 '18 at 11:59
  • I'm not sure I understand what the problem is. It seems to me your CSS works as intended: https://jsfiddle.net/2tn0y7eh/ – agrm Nov 25 '18 at 12:03
  • Hmm, ok interesting. It does seem to be working when I try a slimmed down test. I guess there is something else going on in my code. I'll look it over again., Thanks for confirming the syntax! – Atomiklan Nov 25 '18 at 12:24
  • 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! – Atomiklan Nov 25 '18 at 13:44

1 Answers1

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;
Atomiklan
  • 5,164
  • 11
  • 40
  • 62
  • Please use paragraphs when typing long blocks of texts. makes it easier for others to read – vsync Nov 25 '18 at 13:53