0

I'm working on a website right now where I have two background images. I want the first background image to not scroll. I want it to stay in place and when the image ends, a new background image should start.

I want this second background image to scroll with the content, which I believe is the fixed property for background-attachments. The problem is that the second background image isn't scrolling with the content.

It is just stopping at some point before the content ends and leaving white space at the bottom of the page. I've tried just about everything with messing with different combinations of background positioning, background attachments, and overflows and I can't get it to work.

Here's the code for the background images:

body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-image: url(bg2.jpg), url(bg3.jpg);
    background-repeat: no-repeat, repeat-x;
    background-position: left top , 1920px 1288px; 
    background-attachment:local, scroll;
    overflow: auto, visible;
    margin: 0;
    padding: 0;
    color: #000;
}

For the background-attachment property, I've tried having the second image as fixed, but it doesn't work.

For reference of what my problem is, you can check the page that I'm working on here. As you can see, the second background image does not continue with the content at the bottom of the page.

Any help would be much appreciated.

Thanks.

Adrian Wragg
  • 7,311
  • 3
  • 26
  • 50
user1696162
  • 105
  • 2
  • 3
  • 5

1 Answers1

0

As per my comment, you will find a possible solution on http://www.css3.info/preview/multiple-backgrounds/

CSS3 multiple background image does not work on IE less than 9.

If you wish a fiddle just tell me.

franchez
  • 567
  • 1
  • 7
  • 20
  • Thanks for that, but I actually already read that over before I posted my question. I already have two background images in place, so that's not the problem. It's just that the second background image isn't functioning how I want it to. Maybe the article you gave me has something that I missed, but I can't seem to fix my problem. Let me know if you have anymore advice. Thanks. – user1696162 Sep 17 '13 at 20:55
  • Nevermind. I believe I figured it out. I might not have done it in the most effective way, but I achieved the look that I was trying to. – user1696162 Sep 17 '13 at 22:56