Html 如何使背景位置在响应性网站中保持不变_Html_Css_Responsive Design_Background Image_Css Position

Html 如何使背景位置在响应性网站中保持不变

html css responsive-design

Html 如何使背景位置在响应性网站中保持不变,html,css,responsive-design,background-image,css-position,Html,Css,Responsive Design,Background Image,Css Position,我的问题是，当窗口的大小改变背景的位置时，我希望它保持在相同的位置，我在页面的主体上有这个背景像这样： <body id="bg"> <p>some text here</p> </body> 这是默认屏幕大小上的显示方式：当屏幕大小改变时：我想知道的是：我是否需要使用媒体查询，还是有一种更简单的方法来执行此操作？如果您希望它适合屏幕，最好使用背景大小：cover 试着这样做： #bg { background: url(..

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

像这样：

<body id="bg">

 <p>some text here</p>

</body>

这是默认屏幕大小上的显示方式：

当屏幕大小改变时：

我想知道的是：我是否需要使用媒体查询，还是有一种更简单的方法来执行此操作？

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

让我知道它是否会成功-

尝试将position属性更改为fixed。谢谢，我已经尝试了您的代码，但问题是当position:fixed当我向下滚动图像时，图像会随着内容移动，并且我希望保持静止并位于身体的特定位置。然后尝试移除该固定部分。魔术是由背景大小：封面；：当我使用背景尺寸：cover，我需要背景尺寸：100%自动；因为是响应性的，所以问题是背景的位置。尝试两种宽度：100%；最小高度：100%；，在第二步中，尝试将这些设置为容器，即使它是Body我已经尝试过了，但它保持不变，当屏幕大小更改背景移动时，我想我必须使用媒体查询：/

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