不要在窗口调整大小时移动背景图像，保持静止答案

【问题标题】：Do not move background image on Window resize, keep it static不要在窗口调整大小时移动背景图像，保持静止
【发布时间】：2013-04-02 15:12:09
【问题描述】：

当我调整窗口大小时，背景图像也会移动并调整大小，我不希望它调整大小，我希望它保持静止。我真的很困惑如何保持我的背景静止。如果我以像素为单位设置宽度，那么它仍然是静态的，但这不是一个好的选择，因为取决于不同的屏幕尺寸

body {
    background-color: #000000;
    margin: 0 auto;
    width: 100%;
}

#container {
    background: url("url") no-repeat scroll center top transparent;
    width: 100%;
}

代码如下：

<body>
<div id="container">
</div>
</body>

【问题讨论】：

标签： html css

【解决方案1】：

你试过了吗？

#container {
    background: url("url");
    background-repeat:no-repeat;
    background-position:fixed;
}

【讨论】：

图像右对齐，但是静态的东西得到了解决
嗨，你尝试过而不是background-position:fixed;试试这个background-position:center top;
背景位置没有fixed 值。
没有“背景位置：固定；”之类的东西

【解决方案2】：

试试这个代码 -

#container {
    background: transparent url("url") 0 0 no-repeat;
    width: 100%;
}

【讨论】：

图像现在已对齐，但静态问题已解决
它实际上并没有，我知道这个属性但是使用它，整个对齐方式都会改变
您甚至可以使用 javascript/jquery 将背景设为全屏。参考 - stackoverflow.com/questions/11089855/…

【解决方案3】：

如果您将图像设置为width:100%，则图像将随屏幕调整大小。如果您希望它仅位于顶部中心而不缩放，则可以使用position:fixed，显式width，然后正确定位。

#container {
    background:url("url") no-repeat scroll center top transparent;
    background-position:fixed;
    position:fixed;
    width:500px; /* width of image */
    height:auto;
    top:0;
    left:50%;
    margin-left:-250px; /* -1/2 width */
}

【讨论】：