如何在响应式网站中使背景位置不变答案

【问题标题】：How to make background position doesn't change in a responsive website如何在响应式网站中使背景位置不变
【发布时间】：2014-09-24 04:17:25
【问题描述】：

我遇到的问题是，当窗口的大小也改变了背景变化的位置并且我希望它保持在相同的位置时，我在页面的主体上有这个背景。

像这样：

<body id="bg">

 <p>some text here</p>

</body>

CSS：

#bg{
background-image:url(../../images/img1.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: 25% 25%;
}

这是默认屏幕尺寸时的样子：

这是屏幕尺寸变化的时候：

我想知道的是：我需要为此使用媒体查询还是有更简单的方法来做到这一点？

【问题讨论】：

尝试将位置属性更改为“固定”。

标签： html css responsive-design background-image css-position

【解决方案1】：

如果你想让它适合屏幕，你最好使用background-size: cover;。

试试这个方法：

#bg {
    background: url(../../images/img1.jpg) no-repeat 25% 25% fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

让我知道它是否可以解决问题；-)

【讨论】：

谢谢，我已经尝试过你的代码，但问题是当我向下滚动时位置：固定时，图像会随着内容移动，我想保持静止并在身体的特定位置。
然后尝试删除 fixed 部分。魔术是由background-size: cover; 完成的 :)
当我使用 background-size:cover; 时会发生这种情况i60.tinypic.com/2ji0xv.jpg，我需要背景尺寸：100% 自动；因为是响应式的，所以问题是背景的位置。
尝试使用width:100%; 和min-height:100%;，在第二步中尝试将它们设置到容器中（即使它是body）
我已经尝试过了，但还是一样，当屏幕大小改变背景移动时，我想我将不得不使用媒体查询：/