I am trying to build an Elastic site that sits on top of background images that stretches the full width of the browser (see target.gif). I have done it so i have a div with width set to 100% with the background image placed on this and then a div inside that set to 98em width and margin auto to center the site. I have this div set-up for the header(white bar), navigation(grey bar) and content area (dark grey bar). I have done it like this so it scales correctly.
The issue is that when the site scales beyond the width of the browser the background images stop (breaking.gif).
It looks like you can achieve your bottom image result by taking a long thin slice of everything (including the white, nav bar, dark gray, and light gray) and repeat it on the x-axis on the body element. Then it should grow as wide as the browser window and it also very efficient.
Thanks for replying, the trouble with putting it on the background is that when the text size in increased or decreased the background image stays the same height and so the content looks out of place. With the current solution the backgrounds grow and shrink (particularly the nav bar) with the text size as i have given them a height value.
btw. Thanks for creating such a great resource, it has helped me lots in learning and homing my CSS skills.