Question

我想让我的背景图片在浏览器窗口中完全填充。我试过css

body {background:url(bg.jpg) fixed no-repeat 100%}

但它没有覆盖整个屏幕。

Answer 1

css: 
background-size: cover;

我猜是你正在寻找的。对于跨浏览器支持试试这个： CSS：

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

源： css tricks full page background

Answer 2

我使用backstretch.js来适应窗口大小的背景。显然，这是jquery，但从我的经验来看它非常可靠。

http://srobbin.com/jquery-plugins/backstretch/

Answer 3

为img标记和以下格式创建一个id

#background {
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
z-index: 1;
}

Answer 4

CSS：

background：url（yourImage）无重复中心固定; background-size：cover;

修复并拉伸图片

Answer 5

如果你想要包括IE在内的跨浏览器试试这个方法：

        theWindow.resize(function() {
            resizeBg();
        }).trigger("resize");

http://jsfiddle.net/Riskbreaker/A5ZNy/

csstricks中也提到了这一点：

http://css-tricks.com/examples/FullPageBackgroundImage/jquery.php

全屏幕背景

5 个答案: