CSS：背景画像ページ全体よりも大きな

Question

EDIT含有セクションに背景画像を与えるが、画像はスクリーンよりも約15％大きい。私は、バックグラウンドサイズを100％カバーして含むようにしようとしましたが、一貫してページよりも大きかったです。私はDOM内の各要素のサイズを調べました。サイズが同じではありません。大きなものはありません。そのため、大きな背景イメージが何を引き起こしているのか困っています。ここに私のコードは次のとおりです。 HTML

<section className="Intro"> 
    <img /> 
    <h1>...</h1> 
    <h2>...</h2> 
    <h3>...</h3> 
    <p>...</p> 
</section> 

CSS

.Intro { 
    background-image: url('../mobile-bg.jpg'); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
    color: white; 
    height: 100vh; 
} 

Answer 1

あなたのコードは正しかったです。しかし、いくつかのブラウザではいくつかのCSSルールをサポートしていません。それから、CSSルールを使用する必要があります。これで試してみてください。それは動作します

.Intro { 
    background-image: url('../mobile-bg.jpg'); 
    background-repeat: no-repeat; 
    background-position: center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
    background-size: cover; 
    color: white; 
    height: 100vh; 
}