Menu
working on a very small site which loads in one go, so there is a div which holds all the background images, and on top of that (i.e. higher z-index) there is a content div which holds everything. I can switch backgrounds easily based on what content is selected.
Unfortunately, I noticed if you launch in a small window so that scrollbars appear, if you scroll there is no background image in the 'revealed' portions of the page. :-(
Page structure:
<body> <div id="bg"> <div class="bgone"></div> <div class="bgtwo"></div> </div> <div id="container"> <!-- content panels here --> </div> </body> css:
#bg { margin: 0px; position: absolute; top: 0px; left: 0px; width:100%; height: 1024px; z-index:1; } .bgone { margin: 0px; position: absolute; width:100%; height: 1024px; background-image:url(../images/one.jpg); background-position:top; background-repeat:repeat-x; z-index:2; } .bgtwo { margin: 0px; position: absolute; width:100%; height: 1024px; background-image:url(../images/two.jpg); background-position:top; background-repeat:repeat-x; z-index:3; } #container { position:relative; width:900px; padding:0px; margin:0px auto; height:600px; z-index:10; } 
456
To actually have scroll-able images, you need to give it a width - or in this case- height larger than your viewport. Giving the div a specific width and height will allow for scroll, but when viewing the page on a screen with a different resolution, the width of the image will be off.
The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.
Changing background image on scroll To each div add a background-image property. Add background-size , background-position and background-repeat properties to the background image. Set the height of each <div> element. Add some text in the foreground and add position:fixed to it.
The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
I had the same problem and it is annoying. Problem for me was that I could not change the HTML, only the CSS, so I couldn'y remove the additional divs.
The problem as I see it is that the backgrounds have "width: 100%" and the container has "width: 900px". So, for example, if the browser window is 800px wide, the backgrounds are set to 800px and, therefore, when you scroll the window horizontally, you get the areas without the background.
Another way to fix the problem is to remove the "width: 100%" from the backgrounds and replace it with a "min-width: 900px", thus forcing the backgrounds to be always at least the same width as the container. When the window size becomes less than 900px, the backgrounds always remain at the same with as the container. Works a treat.
184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
