Question

此网站在BODY中有一个“min-width：600px”，并在Center中使用backgroundImage。

当我调整大小并且它低于600px时，它会创建滚动条，很好。但是背景不要停在中心位置。背景会忽略最小宽度。

<html>
    <body>
        <div>
            background ignores the min-width

        </div>
    </body>
</html>



body{
    min-width:600px;
    background:url(http://mrknobbymusic.com/wp-content/uploads/2011/08/example-last-ones-standing.jpg) center top;

}

附加信息：

我有一个非常大而且糟糕的网站要修复..所以就像我想要做的第一步一样..当这个人的宽度小于1024px时，这个网站看起来很可怕（600只是一个例子）。所以我更喜欢水平滚动，让网站的最小宽度：1024px，不要破坏网站。只是为了让客户满意，直到我重新制作并修复所有内容。

Answer 1

更新2：

jsfiddle.net/persianturtle/XD4QM/5

body{
    width:600px
    margin: 0 auto;
}

img {
    max-width:100%;
    min-width:800px;
    display: block; 
    margin-left: auto; 
    margin-right: auto
}

更新：

这个怎么样？

http://jsfiddle.net/persianturtle/XD4QM/3/

为什么不将图像放在可以控制它的div中？而不是将图像提供给无法控制的背景？

img {
    max-width:100%;
}

您没有告诉浏览器停止重复播放背景。

看看这个jsFiddle：

http://jsfiddle.net/persianturtle/XD4QM/2/

body{
    min-width:600px;
    background:url(http://mrknobbymusic.com/wp-content/uploads/2011/08/example-last-ones-standing.jpg) center top;
    background-repeat:no-repeat;
}

Answer 2

在我的情况下，我现在就这样做了。

@media screen and (max-width :600px){
    body{
        background-position:-<tested value>px 0px;
    }
}

Answer 3

好吧，我不会采用上述任何方法，而是将代码更改为以下

background:url("http://mrknobbymusic.com/wp-content/uploads/2011/08/example-last-ones-standing.jpg") repeat scroll center top / cover transparent;

注意顶部/封面。封面确保背景始终与div一起调整，并且在您调整图书大小时，背景设置为图书的封面，封面会自行调整大小

Answer 4

尝试在'scroll'和'fixed'之间切换。 background-attachment属性设置背景图像是固定的还是与页面的其余部分一起滚动。

body{
    min-width:600px;
    background:url(example-last-ones-standing.jpg)
    center
    top
    scroll
    no-repeat;
}

CSS - body background center忽略min-width

附加信息：

4 个答案: