Question

layout situation

我认为这是一个常见问题，但我没有在任何地方找到它......

固定宽度布局，以浏览器窗口为中心。在它背后，背景也是中心。

背景不应该导致水平滚动条。内容框应该。

我无法将背景设置为body元素，因为这意味着背景相对于浏览器保持居中（因此当浏览器窗口太小而无法包含整个内容框时，相对于内容“移动”）。

如果我没有将它设置为正文，任何能够“包含”整个图像的东西也会导致滚动条......不是吗？

javascript真的是我唯一的希望吗？

编辑：

似乎我没有很好地解释自己。

这就是我想要的：

（突出显示的区域代表浏览器窗口）

1 - no scrollbars, background sticks to content

请注意，没有滚动条。

2 - scrollbar for content, background sticks to content

内容

上有一个滚动条在浏览器上

这就是我得到的

1 - background centers to window

如果设置为body，则背景以窗口为中心，因此不会与内容对齐。

2 - background causes scrollbars

如果我将背景设置为元素，它会在窗口上生成滚动条，因此，在调整浏览器大小时，内容不会保持居中，只要它应该。

答案

就像下面接受的一样，但是使用此代码

#myBackground {
    background: url("img/background.png") no-repeat scroll center 0 transparent;
    height: 6000px; /*height of the background*/
    min-width: 950px; /*width of the content box*/
    position: absolute;
    width: 100%;
    z-index: -1;
}

Answer 1

我会使用DIV，它是身体的直接孩子，位置为：fixed

#myBackground
{
  background-image: url(myBackground.jpg);
  position:fixed;  
  width:100%;
  height:100%;
}

<div id="myBackground"></div>

位置：在早期版本的IE中缺少固定支持，并且对于较新版本，您需要强制IE使用更现代的doctype来处理位置：正确修复。请尝试将其作为HTML中的第一行：

<!doctype html>

一个问题，你需要一个“固定的”背景还是我正在假设的东西？如果您希望背景与其余内容一起滚动，请替换position：fixed with position：absolute并放弃HTML5 doctype（如果需要）。

坚持内容的背景图像位置

1 个答案: