Html 如何在CSS中创建动态背景div？

我创建了下面的图片，只是为了帮助你们理解我在这里要做什么。

我需要有这个部门在我的网页上，但我不知道我如何能在那里做一个动态的方式。 我的内容是动态的，例如，有时我有一个小文本，但有时我有一个更大的文本，页面的结构与小文本内容不一样

我希望背景跟随内容的大小，并保持我在上面的图像显示相同的结构

更新： Coco方法：

---

我不知道我是否遗漏了什么，但似乎你唯一需要的是：你在哪里

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

换成

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

---

背景将根据需要覆盖页面

将特定背景颜色/部分的内容包装在一个div中，该div的宽度为所需宽度的100%。围绕所需流体图像的百分比宽度播放：

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

和HTML

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

//满足于此//

和调整文本大小时，考虑使用CSS3媒体查询

---

我不知道我是否理解得很好，但我想你必须补充一点

---

背景位置：底部

试试这个布局。我认为这将有助于你纠正这个问题

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>

---

我更新了我的帖子，我试着按照你说的去做，但似乎没有停留在我想要的结构中。我稍后会尝试你的建议，伙计，我现在得去上大学了，=]你的问题有点难理解-也许使用Sanooj的代码和固定宽度会更容易。玩负上边距游戏来正确定位你的div。真的谢谢你，伙计，即使templatemonster.com的支持也帮不了我，谢谢，真的，谢谢。；）

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