幅が100％に設定されていると画像が複製され続け、これを修正する理由は何ですか？

Question

私は練習用のウェブサイトを作成しています。ウェブサイト全体に広がり、400pxの高さの画像を作成したいと考えています。しかし、それは、高さが良いウェブページにわたって拡大するために、画像が同じ画像の2つにそれ自身を複製していることが分かります。 1）なぜ起こっているのですか？ 2）私のコードを見つけるには、これをどのように修正すればよいですか？

.image { 
background-image:url("sauce.png"); 
height: 400px; 
width: 100%; 
position: center;} 

<div class="image"></div> 

Answer 1

コンテナの寸法と位置のプロパティは、背景イメージとは関係ありません。代わりに、次の試してみてください。

また

background-position: center; 
background-repeat: no-repeat; 

、あなたが全体の領域を埋めるために背景画像をしたい場合、あなたは絞るますアスペクト比、またはbackground-size: contain;を維持した容器をトリミングして記入します background-size: cover;を使用することができますアスペクト比を歪ませるコンテナ内の画像全体。

Answer 2

これは、デフォルトでrepeatに設定されているCSSプロパティbackground-repeatです。

.imageのCSSに、次の行を追加します。background-repeat: no-repeat;

Answer 3

background-position: center; 
background-repeat: no-repeat;