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

Question

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

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

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

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

但是,当我尝试放大/缩小(ctrl + - /+)时它会搞砸,当页面缩放时图像会被拉伸/缩小.

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

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

感谢您的任何建议!

Answer 1

还有另一种技术

使用

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 2

我之前使用过这些技术并且它们都运行良好.如果您阅读了每个的优点/缺点,您可以决定哪个适合您的网站.

或者你可以使用全尺寸背景图像jQuery插件,如果你想摆脱上面的错误.

Answer 3

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

该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 页面）