我希望我的背景图像完全填充在浏览器窗口中。我试过css
body {background:url(bg.jpg) fixed no-repeat 100%}
但它没有覆盖整个屏幕。
css:
background-size: cover;
我想这就是你要找的东西。对于交叉 borswer 支持,试试这个: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技巧整页背景
我使用 backstretch.js 使背景适合窗口大小。显然,它是 jquery,但根据我的经验,它非常可靠。
为 img 标签和以下格式创建一个 id
#background {
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
z-index: 1;
}
CSS:
background: url(yourImage) no-repeat center center fixed;
background-size: cover;
这固定(修复)图片并拉伸它。
如果你想跨浏览器包括 IE 试试这个方法:
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
http://jsfiddle.net/Riskbreaker/A5ZNy/
csstricks 中也提到了这一点:
http://css-tricks.com/examples/FullPageBackgroundImage/jquery.php