Div background problem

[-Kilkiju-]

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!

[jlnewnam]

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

Here's an example...

body { background: #color;}

Make sense?

[-Kilkiju-]

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

[jlnewnam]

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.

[-Kilkiju-]

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:

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

[jlnewnam]

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

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

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;
}

[-Kilkiju-]

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?