15

コンテンツが垂直方向にスクロールできる場合でも、常にウィンドウ全体に背景画像が表示されるサイトを作成したいと考えています。

background-size:cover を使用してこの JSFiddleを作成し、背景画像をウィンドウに合わせてスケーリングしました。

内部の div がウィンドウよりも小さい限り、機能します。垂直方向にスクロールすると、背景画像がページ全体に表示されなくなり、代わりに白/灰色の領域が表示されます。

私の質問は、100% の背景画像とスクロール コンテンツを組み合わせるにはどうすればよいかということです。これは私のCSSです：

html {
    height: 100%;
    margin:0px;
    background-color:#999999;
    background-image: url(http://s22.postimg.org/e03w9stjl/main_bg.png);
    background-position:center;
    background-repeat:no-repeat;
    background-size: cover;
}
body {
    min-height: 100%;
    margin:0px;
}
#appcontainer {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.7);
    width:560px; height:2220px;
    left:20px; top:20px;
}

そしてHTML：

<!DOCTYPE html>
<html>
<head></head>
<body>

    <div id="appcontainer">
        This div causes the background image to stop scaling to the page.
    </div>  

</body>
</html>
4

3 に答える 3

23

Use background-attachment: fixed;

Demo

html { 
    height: 100%;
    margin:0px;
    background: url(http://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}

Also, I didn't got why you are using position: absolute; on the wrapper element, generally you should be using position: relative;

于 2013-10-14T15:43:57.223 に答える
5

CSS に追加します。

background-attachment: fixed;
于 2013-10-14T15:46:44.000 に答える
2 
    #appcontainer {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.7);
        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;
        top: 0;
        right 0;
        left: 0;
        bottom 0;
    }
于 2013-10-14T15:44:51.007 に答える