背景サイズ：ボディのカバーがビューポートよりも高い（本体が100％の高さであっても）

bodyに背景画像を使用します。背景画像はビューポートを覆う必要があります（画面の幅と高さが同じである必要があります）。私は次のコードを持っていますが、背景画像はビューポート/スクリーンよりも大きく表示されます。画像の下端が折り畳みの下に広がります。背景画像が身体の100％の高さで切り取られていない可能性があります。背景サイズ：ボディのカバーがビューポートよりも高い（本体が100％の高さであっても）

html { 
 
    \t height:100%; 
 
     } 
 
    
 
    body { 
 
     \t height:100%; 
 
    \t background-image:url("http://lorempixel.com/400/200/"); 
 
    \t background-position: top left; 
 
    \t background-size:cover; 
 
    \t background-repeat:no-repeat; 
 
    \t } 
 
    
 
    main { 
 
    \t max-width:80rem; 
 
    \t height:1000px; 
 
    \t background-color: rgba(0,0,200,0.5); 
 
    \t }

<main></main>

出典

2017-04-15 Markeee

@valsを正常に動作-pseudo 体は削除した気づいた、このスニペットでは体

で特定の問題だろう答え、なぜそれがそのように振る舞うか知っていますか？ – LGSon

私は体の背景に特殊なケースがあると信じていますが、これについての質問があると思いますが、私はそれを見つけることができませんでした – vals

私は、この動作の理由は、スペックのこの部分であると信じています：

ルート要素の背景はキャンバスの背景になり、キャンバス全体をカバーし、で（「のbackground-position」の）アンカーそれがルート要素自体のためだけに描画された場合と同じポイントです。ルート要素はこのバックグラウンドを再びペイントしません。

は、これは

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url("http://lorempixel.com/400/600/"); 
 
    background-position: top left; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    z-index: -1; 
 
} 
 

 
main { 
 
    max-width: 80rem; 
 
    height: 1000px; 
 
    background-color: rgba(0, 0, 200, 0.5); 
 
}

<main></main>

出典

2017-04-15 16:15:21 vals

私は鉱山を削除し、あなたのものを更新しました。プラス1 ...あなたが気にしないことを願っています:) – LGSon

@LGSonもちろん、私は気にしません:-)あなたの答えは大丈夫でした。代わりに、ちょうど問題が* body *の周りの特殊なケースであることを明確にしたかったのです。とにかく、この方法でうまくいく。 ...ありがとう：-） – vals

あなたは

body { 
 
    height:100%; 
 
    min-width:100vw; 
 
    min-height:100vh; 
 
    background-image:url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSnfXp5RSFk2ZfOmIl7EMvUHEW0bzWBowc6NtDFkG3M7r2Xljl2"); 
 
    background-position: top left; 
 
    background-size: cover; 
 
    background-repeat:no-repeat; 
 
    margin:auto; 
 
    }

<body> 
 
<main> 
 
</main> 
 
</body

以下100

参照スニペットのビューポート測定で最小幅と体への分の高さを適用することができます

出典

2017-04-15 14:05:41 repzero

これは画像の高さよりも低いときに切り取られることを止めません比の高さは....意味がありますか？ – LGSon

背景サイズ：ボディのカバーがビューポートよりも高い（本体が100％の高さであっても）

答えて

関連する問題