即使放大/缩小，CSS主体背景图像也固定为全屏

Question

我试图用CSS实现这样的东西：

我想将全身背景图像固定在全屏上，这是通过以下代码完成的：

body
{
    background: url(../img/beach.jpg) no-repeat fixed 100% 100%;
}

现在我可以验证窗口确实已经填满了该图像，至少这可以在我的Firefox 3.6上运行

但是，当我尝试放大/缩小（ctrl + - / +）时它会搞砸，当页面缩放时图像会被拉伸/缩小。

纯粹用CSS做这个有更好的方法吗？我没有找到背景图像的好属性。

或者我应该开始考虑jQuery来动态操纵宽度和高度？它们都设置为100％所以我认为应该“一如既往”:(

感谢您的任何建议！

Answer 1

我之前使用过these techniques并且它们都运行良好。如果您阅读了每个的优点/缺点，您可以决定哪个适合您的网站。

或者你可以使用full size background image jQuery plugin，如果你想摆脱上面的错误。

Answer 2

还有另一种技术

使用

background-size:cover

那就是全套的CSS

body { 
    background: url('images/body-bg.jpg') no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
} 

最新的浏览器支持默认属性。

Answer 3

在您的css文件中添加：

.custom_class
 {
    background-image: url(../img/beach.jpg);
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
 }

然后，在你的.html（或.php）文件中调用这个类：

<div class="custom_class">
   ...
</div>

Answer 4

你可以用普通的css做很多事情...... css属性background-size可以设置为很多东西，就像Ranzith指出的那样只是cover。

background-size: cover设置缩放图像以覆盖整个屏幕，但可能意味着如果屏幕和图像的纵横比不同，则某些图像不在屏幕上。

一个很好的选择是background-size: contain，它调整背景图像的大小以适应较小的宽度和高度，确保整个图像可见但如果纵横比不同可能导致信箱。

例如：

body {
      background: url(/images/bkgd.png) no-repeat rgb(30,30,30) fixed center center;
      background-size: contain;
     }

我发现不太有用的其他选项是：background-size: length <widthpx> <heightpx>，它设置背景图像的绝对大小。 background-size: percentage <width> <height>背景图片是窗口大小的百分比。 （见w3schools.com's page）

Answer 5

这是缩放时整页背景图像的简单代码你只需在style / css中应用width:100%即可

position:absolute; width:100%;

Answer 6

像这样直接使用

.bg-div{
     background: url(../img/beach.jpg) no-repeat fixed 100% 100%;
}

或者单独调用CSS

.bg-div{
    background-image: url(../img/beach.jpg);
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}