web-dev-qa-db-ja.com

全高の背景画像を表示する方法は？

幅979px高さ1200pxの写真タイプ（風景ではない）の背景画像があります。左にフロートするように設定し、（コンテンツの長さに関係なく）上下にスクロールする必要なく、画像の高さを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;
}
cssimagebackground
41
hangee

あなたが持っているコードでそれをすることができます、あなたはただhtmlとbodyが100％の高さに設定されるのを確実にする必要があります。

デモ： 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;
}
74
Kevin Lynch

CSSはbackground-size：cover;でそれを行うことができます

しかし、より詳細に、より多くのブラウザをサポートするには...

次のようなアスペクト比を使用します。

 aspectRatio      = $bg.width() / $bg.height();

FIDDLE

6
Riskbreaker
 html, body {
    height:100%;
}

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