I'm currently designing a website that features two background images. My goal is to have the first background image remain fixed in place, while the second one scrolls with the content. However, I am facing an issue where the second background image stops scrolling before reaching the end of the content, leaving white space at the bottom of the page.
I have experimented with different combinations of background positioning, attachments, and overflows in the CSS code, but have not been able to resolve the problem. Here is the snippet of the background images code:
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;
}
I have attempted setting the second image as fixed in the background-attachment property, but it has not resolved the issue.
If you want to see the problem firsthand, you can visit the webpage I am working on here. The second background image does not align correctly with the content at the bottom of the page.
I would greatly appreciate any assistance or suggestions. Thank you!