☰

背景画像をフルサイズで表示するにはどうすればいいですか? 質問する

tag-icon • tag-icon css image background
背景画像をフルサイズで表示するにはどうすればいいですか? 質問する

幅 979 ピクセル、高さ 1200 ピクセルの写真タイプ (横向きではない) の背景画像があります。これを左にフロートするように設定し、上下にスクロールせずに (コンテンツの長さに関係なく) 100% フル画像の高さを固定して表示したいと思います。

これは私の CSS コードですが、機能しません:

img, media {
    max-width: 100%;
}

body {
    background-color: white;
    background-image: url('../images/bg-image.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

ベストアンサー1

お持ちのコードでこれを行うことができます。htmlと がbody100% の高さに設定されていることを確認するだけです。

デモ：http://jsfiddle.net/kevinPHPkevin/a7eGN/

html, body {
    height:100%;
} 

body {
    background-color: white;
    background-image: url('http://www.canvaz.com/portrait/charcoal-1.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

おすすめ記事