html - CSS body 固定背景

Question

我有这个 CSS:

body
{
    background-position: center top;
    background-color: rgb(237, 237, 237);
    font-size: .85em;
    font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
    margin: 0px auto;
    padding: 0;
    color: #696969;
    width: 1000px;
    height: 1200px;
    background-image: url('Background.png');
    background-repeat: no-repeat;
    background-attachment: inherit;    
    top: 0px;
}

当我最大化窗口时一切正常，但是当我缩小窗口时，背景图像会移动。

This is how look in maximizedbrowser window

And this is after change window size

Answer 1

您从人们那里得到的大多数答案都需要 IE9+(因为它是 CSS3)。但是，如果您希望用户也使用较旧的浏览器(我在这里是务实和安全的)，我认为您需要使用 jQuery/JavaScript 来做到这一点。过去我在 CSS3 中做过类似的事情，但后来我意识到大多数公司/公司仍在使用 IE8，而最好的方法是使用 JavaScript。

这里有几个例子:

1. http://buildinternet.com/project/supersized/slideshow/3.2/demo.html (这是一个很好的例子)
2. http://designshack.net/?p=13616
3. http://css-tricks.com/examples/FullPageBackgroundImage/jquery.php