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

时间：2014-08-01 02:48:21

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

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

像这样：

<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%;
}

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

http://i60.tinypic.com/2n03dsg.jpg

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

http://i62.tinypic.com/11tlpwz.jpg

我想知道的是：我是否需要使用媒体查询，或者是否有一种不那么复杂的方法呢？

1 个答案:

答案 0 :(得分：0)

如果您希望它适合屏幕，最好使用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;
}

让我知道它是否可以做到这一点; - ）

相关问题
最新问题