Question

I’ve read several posts about this issue but haven’t found a solution. My website uses a parallax scrolling effect and I need to use a div with a background instead of an image. Is there a method for making the background go full screen?

Answer 1

I encountered the same problem myself, my solution would be to set your divs up like so:

<div id="blah">
<div class="content">
Blah content
</div>
</div>

Then give each div your desired background, give it a width: 100%; and make it display: inline-block; Because the div is inline-block, if the user has their browser window really small and your page requires a x-scroll bar, then the background will stretch the whole width of the page. If instead you leave it as display: block; when the user x-scrolls the background colour will disappear for anything that is not initially in view.

As for your content class thats where you set up your grid for your content, using 960gs or whatever you fancy, and as its a class you can apply it to every section/div.

Working (in progress) example here: http://residencyradio.com