解决方案:我使用了http://srobbin.com/jquery-plugins/backstretch/这是我找到的最佳解决方案。不完美，因为背景图片不会向下“滚动”但仍然有效。
这是我的问题的截图:
如您所见，当我调整窗口大小时(使其变小)，会出现空白。有谁知道问题出在哪里？
HTML:
<body>
<div id="wrapper">
<header>
<div id="services">
<div class="column-left">Column left</div>
<div class="column-center">Column center</div>
<div class="column-right">Column right</div>
</div>
</header>
<section><img src="http://www.vectortemplates.com/raster/batman-logo-big.gif" alt="PPP" /></section>
<footer>
<p>Some text here</p>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/main.js"></script>
</body>
CSS:
body {padding:0;margin:0;}
html {
color: #fff;
}
#wrapper {
background: url(../images/bg2.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
}
#services {
margin-left: auto;
margin-right: auto;
width: 600px;
overflow: hidden;
}
.column-left{
float: left;
margin-top: 100px;
width: 200px;
}
.column-right{
float: left;
margin-top: 100px;
width: 200px;
}
.column-center{
float: left;
margin-top: 100px;
width: 200px;
}
footer {
border-top-style: solid;
border-top-width: 1px;
border-color: white;
margin-left: auto;
margin-right: auto;
width: 800px;
}
section {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
width: 800px;
}
section img {
margin-left: auto;
margin-right: auto;
width: 200px;
height: 200px;
display: block;
}
最佳答案
Pretty good solution I thought, even if it isn't technically resizeable, since you can't set the size of a CSS background-image.
也许这是您的一个选择，但这是一个使用 jquery 的解决方案:
<head>
....
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("img.source-image").hide();
var $source = $("img.source-image").attr("src");
$('#page-body').css({
'backgroundImage': 'url(' + $source +')',
'backgroundRepeat': 'no-repeat',
'backgroundPosition': 'top center'
});
});
</script>
</head>
<body id="page-body">
<img class="source-image" src="images/image.jpg" alt="" />
</body>
关于html - 全屏背景，窗口小时页脚下方的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25390238/