如何在浏览器宽度变化时设置背景图像以保持其位置？答案

【问题标题】：How to set background image to keep its position while browser width is changing?如何在浏览器宽度变化时设置背景图像以保持其位置？
【发布时间】：2012-09-23 02:48:51
【问题描述】：

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

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

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

我仍在寻找 CSS 中是否有一种简单的方法可以在浏览器宽度超过 960 像素时保持图像居中并在低于此尺寸时保持固定？

【问题讨论】：

标签： css background-position browser-width

【解决方案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的信息click here

【讨论】：

我知道了，但是有时间限制。
你应该小心你想在哪里使用最小宽度。在 IE 中不支持。如果要在 IE 中显示页面，您还应该设置宽度
您有什么建议，如何为 IE

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：