css - CSS ストレッチ背景画像

Question

ページのとして使用する大きな画像がbackground-imageあります。私が欲しいのは、ページの高さを埋めるために画像の高さが引き伸ばされることです。これも中央に配置する必要があります。

background: black url("/image/background.jpg") no-repeat fixed center;

Answer 1

background-size: cover最新のブラウザーではうまくいきます - 詳細については、mozilla のドキュメントを参照してください。

古いブラウザー (特に古いバージョンの IE) では、この動作をエミュレートするために、このような jQuery プラグインで多くの成功を収めてきました。

Answer 2

ここに良い記事があります

http://css-tricks.com/perfect-full-page-background-image/

それの要点

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

Answer 3

これをcssに追加します

{
background: black url("/image/background.jpg") no-repeat fixed center;
height: 100%;
width:100%
}

Answer 4

div を使用すると、探している効果を得る最も簡単な方法になると思います。

<div id="background">
    <img src="/image/background.jpg" class="stretch" alt="" />
</div>
    <style>
    #background {
        background-color:#000000;
        width: 100%; 
        height: 100%; 
        position: fixed; 
        left: 0px; 
        top: 0px; 
        z-index: -1;
    }

    .stretch {
        width:100%;
        height:100%;
    }
    </style>