Question

解决方案：我使用了http://srobbin.com/jquery-plugins/backstretch/，这是我找到的最佳解决方案。不完美，因为背景图形不向下“滚动”但仍然有效。

以下是我的问题的截图：

Screenshot

正如您所看到的，当我调整窗口大小（使其缩小）时，将出现白色空格。有没有人知道问题是什么？

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;
}

Answer 1

我认为这是一个非常好的解决方案，即使它不是技术上的可调整大小，因为您无法设置CSS背景图片的大小。

Found on cssTricks

也许这是一个选项，但这是一个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>

Found on cssTricks

全屏幕背景，窗口小时页脚下方的白色空间

1 个答案: