Div background problem

So basically, I have div called #maincontent. My simple question is, is it possible to make div background-color fill more area than the div itself?
More simply it needs to be like this.. http://imageftw.com/uploads/20130219/73nimet%C3%B6n.png

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..

I hope you get my point, any help is appreciated! :)

You need to set your body to the correct background color, not just your main content.

Here's an example...

Code:

---

body { background: #color;}

---

Make sense?

You got it wrong, I already have a background for body.

This is what I mean http://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..

Can you provide a live link to your site? It's much easier if I can see your style sheet.

From the looks of it though, and what you're trying to accomplish, it sounds like you don't have everything inside a container <div>.

Do you have a container class already set up?

If you're worried about showing off content, replace with place holders and load onto a directory so we can view what you're viewing. It'll make this process much easier.

I can't provide any link to the site yet, but I hope images are enough..
http://imageftw.com/uploads/20130219/07nimetön.png

and here with zoom out: (also don't know why that "about" nav link drops like that when zoom out)
http://imageftw.com/uploads/20130219/6nimetön.png

Here is HTML and CSS for these divs:

HTML Code:

---

<div id="maincontent_wrap" align="center">   
</div><!--END maincontent_wrap-->       
<div id="maincontent">           
    <div class="heading"><h1>Heading</h1></div>           
    <div class="textcontent"><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p></div> 
</div><!--END maincontent-->

---

Code:

---

body {
    background-image: url(images/green1.png);
    background-attachment: fixed;
    background-repeat:repeat;
    height:100%;
    z-index:0;
}
#wrapper {
    height: 100%;
    width: 700px;
    margin-right: auto;
    margin-left: auto;
}
#maincontent_wrap {
    height: 10000px;
    width: 700px;
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    background-color:rgba(82,160,50,0.7);
    z-index:20;
    pointer-events:none;
}
#maincontent {
    height:100%;
    width:600px;
    margin-left:auto;
    margin-right:auto;
    z-index:10;
    padding-bottom: 50px;
}
h1 {
    color: #111;
    text-transform: none;
    font-variant: small-caps;
    font-weight: 900;
    font-size: 36px;
    position:static;
}
.textcontent {
    position: static;
    overflow:none;
}

---

#wrapper is around all content on page, and set 10000px for bg height as an example of my scrolling problem.

One thing to remember is that height will always set itself automatically. You don't even need to put the 'height: auto;' in there...

I've made some touch ups to your CSS. Let me know if this works for you...

It's also a good idea to keep your style sheet outside your individual html pages. As you can see here, I’ve generated your html/css based on an external stylesheet called style.css.

It works for me when I load it… let me know if you have questions.


Here's your HTML...

Code:

---

<html>
<body>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div id="maincontent_wrap" align="center">   
</div><!--END maincontent_wrap-->       
<div id="maincontent">           
    <div class="heading"><h1>Heading</h1></div>           
    <div class="textcontent"><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p></div> 
</div><!--END maincontent-->
 
</body>
</html>

---

Here's your CSS...

Code:

---

body {
    background-image:url("images/green.png");       
    background-attachment: fixed;
    background-repeat:repeat;
    z-index:0;
}
#wrapper {
    width: 700px;
    margin-right: auto;
    margin-left: auto;
}
#maincontent_wrap {
    width: 700px;
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    background-color:rgba(82,160,50,0.7);
    z-index:20;
    pointer-events:none;
}
#maincontent {
    height:100%;
    width:600px;
    margin-left:auto;
    margin-right:auto;
    z-index:10;
    padding-bottom: 50px;
}
h1 {
    color: #111;
    text-transform: none;
    font-variant: small-caps;
    font-weight: 900;
    font-size: 36px;
    position:static;
}
.textcontent {
    position: static;
    overflow:none;
}

---

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?