如何设置背景图像以在浏览器宽度更改时保持其位置

Question

我想知道如何设置背景图像以保持其在此站点上的位置：http://www.jylkkari.fi/wordpress/

当您将浏览器拖动到 960 像素宽以下时，侧边栏的背景开始向中心移动。

我发现了这个可以解决这个问题的Javascript。

我仍在搜索 CSS 中是否有一种简单的方法可以在浏览器宽度超过 960 像素时保持图像居中，并且在低于此大小时保持固定？

Answer 1

定义你的身体

min-width:980px;

---

body{
min-width:980px;
}

--------------对于 IE

习惯于像这样对 CSS 进行条件

 <!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->  

创建 CSS 文件

body{width:980px;}  

有关 IE CSS 的更多信息，请单击此处

Answer 2

通过将width: 960px;添加到 background 语句所在的元素来执行此操作（在您的情况下，这将body）。

Answer 3

您可以使用媒体查询，在正文达到一定宽度时更改正文的 CSS：

@media all and (max-width: 960px) {
  body {
    background-position: left center;
  }
}