Elements of unlimited width background disappears on small devices

Hey.

So, here’s the situation.

Let’s say that inside the body tag I have a div element that has the ID container with no width specified so it goes on forever, and I give this element a repetitive pattern as a background.
Then, inside this div I have another one called content, and this one has a fixed width of, say, 800px which is centered on the page.

Now, If i access this page from a phone or any device that has a screen width of under 800px, or even if I shrink my browser window to under 800px and then I scroll right to see the rest of the content div, the background from the container div disappears.

Here’s a Screenshot to show what I mean:
https://s1352.beta.photobucket.com/user/Serban_Andreica/media/screenshot_zps4a9173a3.png.html

Now, other than the body, I have three more divs that I want to be limitless and have limitless backgrounds: the header, the menu bar and the portfolio bar.

However, when I shrink the browser and scroll right, that happens.

Any tips?

ETA: I checked with firebug, and the problem is that the HTML tag ends with the browser window, instead of being unlimited.

https://s1352.beta.photobucket.com/user/Serban_Andreica/media/screenshot2_zps465cb07f.png.html

The blue part is where the HTML tag ends. It has the width of the browser window, but doesn’t take into account the scrolling.

While the body background stretches beyond the HTML tag limits, the other backgrounds don’t.