CSS页面背景如何固定？

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

当我最大化窗口时，一切都很好，但当我将窗口变小时，背景图片会移动。 这是最大化浏览器窗口的样子 这是改变窗口大小后的样子

- Std_Net

Answer 1

试试这个：

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position:fixed;

- SVS

---

问题在于将其设置为固定值会使DOM元素脱离正常位置，因此“覆盖”适应于整个页面而不是该元素。目前似乎找不到解决方法。 - Carson

Answer 2

首先，尽可能将CSS属性分组在一起，例如：

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

您能否同时提供一个 jsFiddle 示例以便我们可以看到整个代码，或一个页面链接？

http://jsfiddle.net/

谢谢

- Aaron Brewer

Answer 3

大多数人给出的答案需要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

- Geocrafter