Question

我在下面创建了以下图片，只是为了帮助您了解我在这里尝试做什么。 background

我需要在我的网页中进行这些划分，但我不知道如何以动态的方式做到这一点。我的内容将是动态的，例如，有时我会有一个小文本，但有时我会有一个更大的文本，并且页面的结构与在小文本内容中的结构不同。

我希望背景符合内容的大小，并保持与我在上图中显示的结构相同。

更新可可方法： enter image description here

Answer 1

尝试这样的布局。我认为这可以帮助您纠正这个问题

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

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

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

，背景将根据需要覆盖页面

Answer 3

将特定背景颜色/部分的内容包裹在您想要的宽度的100％的div中。使用所需流体图像的百分比宽度进行游戏：

#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媒体查询

CSS3 Media Queries

Answer 4

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

background-position: bottom

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

4 个答案: