我有一些代码：背景的顶部和底部

<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高度设置为bottom.png

来源

2012-02-24 beetle

你可以发布一些更多的代码吗？用你现在的小片段，我不知道该说什么。例如，“在#top我使用body设置背景”是什么？ – 2012-02-24 12:11:36

我很不清楚你想要达到的目标......你可以尝试用更多的信息来延伸你的问题吗？ – NDM 2012-02-24 12:12:17

听起来像他遇到的问题是#bottom div中的背景图像被裁剪，因为它被限制在与容器div（900px而不是1080px）相同的宽度。最简单的解决方案是简单地将#container的宽度扩大到1080px，有没有理由不能这样做？ – DNJohnson 2012-02-24 12:16:03

你的意思是这样吗？

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 
}

来源

2012-02-24 12:30:56

但我需要脚注内容在同一级别的容器。 – beetle 2012-02-24 12:35:40

我认为我找到了一个解决方案：html {; background-image：url（'images/bottom.png'）; background-repeat：repeat-x; background-position：left bottom;}，然后将div高度设置为a bottom.png – beetle 2012-02-24 12:38:18

我不太明白“同级”的意思。我认为你的意思是页脚内容必须在容器内。如果你的意思是这个答案是不可能的。如果容器变大（如果宽度：100％），页脚只会变大。如果您将脚注放在容器的外部（如果宽度：100％），则会在窗口大小调整时调整大小。 – 2012-02-24 12:41:53

我建议尝试把你的#bottom外#container比，因为内#container你不能提高你的宽度更比#container。试试这个：

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

来源

2012-02-24 12:31:47 Asif

如果浏览器小于1080px，这会给你一个水平滚动条。如果浏览器宽度超过1080像素，底部也不会移动。如果你希望这个容器在没有容器的情况下变宽，你应该将容器的底部放在容器的外面。但这不是一般的溶剂。 – 2012-02-24 12:34:31

我认为我找到了一个解决方案：html {; background-image：url（'images/bottom.png'）; background-repeat：repeat-x; background-position：left bottom;}，然后设置div高度为bottom.png – beetle 2012-02-24 12:39:10

@RickHoving：谢谢。请参阅编辑的代码。这将是一个解决方案吗？ – Asif 2012-02-24 15:57:45

背景的顶部和底部

EDIT1：

EDIT2：

回答

相关问题