If this is not possible I will think of something else..
I already tried to make a larger div behind this one, called #maincontent_wrap. It is about same size as the red area in that image above. But here the problem is, it scrolls the page as long as the background is, I want it to scroll only as long as the text content appears, so that's why I wanted the background to the #maincontent div instead..
You got it wrong, I already have a background for body.
This is what I meanhttp://imageftw.com/uploads/20130219/9nimetön.png. The brown area is the place for background, i am able to add it with absolute positioning, but then the text in #maincontent goes behind the background. Also now im not able to make the background go along with text content.. if i make the bg too big it scrolls too much, not caring about how much text there is, or if too much text, then the bg ends too soon.
I would like it to be when you zoom page out, it looks like this:http://imageftw.com/uploads/20130219/5nimetön.png But then again, it makes me scroll all the way down until bg ends..
I copied your CSS, it makes the #maincontent_wrap height 0px if it is not set, because there is no any content inside it..
So I moved this around the #maincontent again, to see if it works. Well, this way has been the closest to what I want so far, but when the text content is really small, it makes to background go like this: http://imageftw.com/uploads/20130220/nimet%C3%B6n.png
Just figured out that I can add min-height:470px to make the background work.
Now it is like I want it to be, except when I zoom out, it's not the 100% height of page..
Can't find any way how to do this..
Is it possible if I add another div called ex. #maincontent_wrap2 and that continues the background under the first one, but without the scroll bar appearing in the side of the window?
Or is there an easier way?