Html 顶部和底部的背景_Html_Css

Html 顶部和底部的背景

html css

Html 顶部和底部的背景,html,css,Html,Css,我有一些代码： <body> <div id="container"> <div id="top"></div> <div id="bottom"></div> </div> </body> 但它在容器内部创建（我需要在容器外部创建底部bg，当站点更宽时）编辑2：我想我找到了一个解决办法： html{；背景图像：url（'images/

我有一些代码：

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

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

编辑2：

我想我找到了一个解决办法：

html{；背景图像：url（'images/bottom.png'）；背景重复：repeat-x；背景位置：left-bottom；}

，然后将div-height设置为bottom.png

您的意思是这样的吗

html:

我建议试着把你的

#底部

放在

#容器

之外，因为在

#容器

内，你的宽度不能超过

#容器

的宽度。试试这个：

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

你能再发一些代码吗？有了你现在掌握的一个小片段，我不知道该说什么。例如，什么是“在顶部，我使用身体设置背景”？我很不清楚你想要实现什么。。。你能试着用更多的信息来扩展你的问题吗？听起来他遇到的问题是#底部div中的背景图像被裁剪了，因为它被限制为与容器div相同的宽度（900px而不是1080px）。最简单的解决方案是简单地将#容器的宽度扩展到1080px，有什么原因你不能这样做吗？我不能这样做，因为它必须是900px（它周围必须有更多的空间）。如果浏览器小于1080px，这会给你一个水平滚动条。此外，如果浏览器宽度超过1080px，则底部不会移动。如果你想在容器不移动的情况下使其更宽，你确实应该把底部放在容器外面。但这不是一个通用的解决方案。我想我找到了一个解决方案：html{；background image:url（'images/bottom.png'）；background repeat:repeat-x；background position:left-bottom；}，然后将div height设置为底部。png@RickHoving：谢谢。请参阅编辑的代码。这是一个解决方案吗？但我需要将页脚内容放在容器的同一级别。我想我找到了一个解决方案：html{；背景图像：url（'images/bottom.png'）；背景重复：repeat-x；背景位置：left-bottom；}，然后将div-height设置为bottom.pngI不太明白“同一级别”是什么意思。我想你的意思是页脚内容必须在容器内。如果你是这个意思，答案是不可能的。只有当容器变大时（如果宽度：100%），页脚才会变大。如果你把页脚放在容器外面，它会随着窗口的调整而调整大小（如果宽度：100%）。对你第二条评论的反应：在这种情况下，我不明白你要做什么。你能再解释一点吗？我的意思是在容器的相同位置-因为我想在页脚添加一些文字：）对不起，我的英语。我忘记在我的粘贴栏中添加正文边距0自动0自动：）

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

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

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