EDIT1：

Question

我有一些代码：

<body>
<div id="container">
<div id="top"></div>
<div id="bottom"></div>
</div>
</body>

容器宽度例如是900px。在#top我使用body设置背景。

但是我不能在#bottom中使用背景因为它会更宽，例如1080px（背景只能在#container上看到）。怎么做？

EDIT1：

body
{
background-image: url("images/bg_main.png");
background-repeat:repeat-x;
}
#top
{
    background-image: url("images/top_bg.png");
    height:50px;
}
#container
{
    margin: 0;
    width: 1024px;
    background:#fff;
}
#footer
{

    background-image:url("images/bottom.png")
}

但它创建了内部容器（我需要在容器外部创建底部bg，当网站更宽时）

EDIT2：

我认为我找到了一个解决方案： html{;background-image:url('images/bottom.png');background-repeat:repeat-x;background-position:left bottom;}，然后将div height设置为bottom.png

Answer 1

你的意思是这样吗？

HTML：

<body>
    <div id="container">
        <div id="top"></div>
        <div id="bottom"></div>
    </div>
    <div id="footer"></div>
</body>

并添加以下css：

#footer
{
    width:100%;
    height:40px; //Or something else you'd like
    background-color: yellow; //Or the image you want
}

Answer 2

我建议您尝试将#bottom放在#container之外，因为在#container范围内，您的宽度不能超过#container。试试这个：

#container{
  width:1024px; //or whatever
}
#bottom{
  height:40px; //or whatever
  width:100%; 
  background:url("images/bottom.png") repeat-x center;
}

背景在顶部和底部

EDIT1：

EDIT2：

2 个答案: