How make a dynamic background div in CSS?

Question

I created the following image below just to help you guys understand what I'm trying to do here.

I need to have this divisions in my web page but I don't know how I could do there in a dynamic way. I have contents that is gonna be dynamic, for example, sometimes I have a small text, but sometimes I have a bigger text and the page don't follow the same structure as when it was in a small text content.

• Here is a page with a small text .
• Here is a page with a big text .

I would like the background follow the size of the content and keep the same structure as I'm showing in the image above.

UPDATE: Coco approach:

Answer 1

Just try like this layout. i think this will help you to correct this issue

Fiddle link

HTML :

<div class="outer-div">
         <div class="top-bg">
             <div class="container">
                 <p>sadasdasdasdsad</p>
                 <p>sadasdasdasdsad</p>
                 <p>sadasdasdasdsad</p>
                 <p>sadasdasdasdsad</p>
                 <p>sadasdasdasdsad</p>
             </div>
         </div>
        <div class="middle-bg">
            <div class="bg-bottom-div"></div>
        </div>
        <div class="footer"></div>
</div>

CSS :

.outer-div {
    background:#000;
}
.top-bg {
    padding-bottom:40px;
}
.container {
    background:#fff;
    width:400px;
    margin:0 auto;
}
.middle-bg {
    background:#880015;
}
.bg-bottom-div {
    background:#fff;
    width:400px;
    margin:0 auto;
    height:60px;
    position:relative;
    top:-20px;
}
.footer {
    background:#00a2e8;
    height:40px;
}

Answer 2

I don't know if I'm missing something but it seems the only thing you need is this: where you have

.border-top {width:100%; background:url(../images/border-top-tail.gif) 0 0 repeat-x;}

change it by

.border-top {width:100%; background:url(../images/border-top-tail.gif);}

and the background will cover the page as you need

Answer 3

Wrap your content for that particular background color/section in a div that is 100% of the width that you desire. Play around w/ the percentage widths for your desired fluid image:

#div_background_wrap1 { width:100%; background-color:#000;}
#div_background_wrap2 { width:75%; background:img url; margin:auto;}

and HTML

<div id="div_background_wrap1">
<div id="div_background_wrap2">
 <div>
 //content here//
 </div>
 </div>
 </div>

And for resizing text, consider using CSS3 Media Queries

CSS3 Media Queries

Answer 4

我不知道我是否了解得很好，但是我认为您必须添加

background-position: bottom