Problem with 100% background-image wrapper disappearing when scrolling

Question

I have http://www.mrfishermusic.com/

You'll notice that the main wrapper is 1042px (#main). Then I have #container surrounding that which is width 100%. I made it like this because the background image of the page is huge width wise.

The problem is if the browser is resized small horizontally... say like.. 700px wide (or way smaller, like on an iPhone), when you scroll to the right the header and footer both just disappear, although the #main wrapper remains intact.

I see some other people had this issue but I'm not a CSS ninja so I couldn't quite reproduce the solution onto my site - I apologize if this has been asked before.

Thanks!

Answer 1

The container size of 100% is relative to the viewport and is not updated when you scroll/resize. You have several options:

• use javascript to handle viewport size changes
• set the header container minimal size in pixels
• set the background on body instead (because it's not limited to the viewport size) : background-image: url(background.png); background-position: center top;