Question

http://www.goodshow.tv

我遇到了背景图片的问题。如果浏览器足够宽，则布局看起来正确，但是当它太窄时，背景会向左移动。有没有办法阻止它移动？

Answer 1

当页面宽度小于<div id="body"> div的页面宽度时，会发生此问题，导致该div不再居中。我发现我至少可以通过添加：

来解决这个问题

html { min-width: 980px }

Answer 2

从背景图像中删除白色部分，并使用CSS的背景规则使左侧边栏背景变为白色。仅将图像添加到右侧部分。保持左侧边栏的宽度。

Answer 3

我想知道这是否与使用body和#body css选择器有关（一个用于名为body的标记，另一个用于名为body的div

导航区域是否具有白色背景并且#content div具有图像背景？

你可以试试这个而不是你拥有的吗？：

body {
    margin: 0px;
    padding: 0px;
}
#content {
    background-color: #333;
    background-image: url(../images/bg.png);
    background-repeat: repeat-y;
    background-position: center;
    float: right;
    width: 720px;
    padding-top: 35px;
    padding-left: 0px;
}

Answer 4

难道你不能用白色背景div封装整个左侧吗？

Answer 5

我认为问题在于导航和内容区域都是浮动的，内容的宽度是绝对的。

最快的修复方法是将#nav上的背景颜色设置为白色。这仍然会导致标题问题（Good Show和亚特兰大的创意工作室），但我认为你需要重新审视你是如何做这部分的（他们只是2张图片）

可能最好有2列一直到顶部，这些图像可以在每个顶部的固定高度div中

如何保持居中的背景图像不会破坏布局？

5 个答案: