レスポンスdiv背景、繰り返しはありません

Question

私はこのdivバックグラウンドを通常の100％イメージとして動作させ、同じようにスケールするようにしています。

マイCSS：

.videobackground{ 
margin-top:-5px; 
max-width:1140px; 
height:348px !important; 
background-image:url(imgs/rpp-behind-the-scenes-hero2bg.jpg); 
background-position:center; /* IE fix */ 
-webkit-background-size: contain; 
-moz-background-size: contain; 
-o-background-size: contain; 
background-size: contain; 
} 

マイHTML：

<div class="videobackground"></div> 

ここでは、それは完全に罰金見ているデスクトップ上の私の問題です。

デスクトップピクチャ：

しかし、すぐに、私はこの問題が発生したページを拡大縮小し始めて。

モバイル画像：

任意の提案を大幅に私はすべてについてちょうど試みたように私は感じ、理解されるであろう。そして、私がdivの背景を使用している理由は、画像の代わりに、divの左側に埋め込まれたyoutubeをオーバーレイしているからです。

ありがとうございます！

アダム。

Answer 1

あなたのCSSに

background-repeat: no-repeat; 

を追加することができます。

だから、

.videobackground{ 
margin-top:-5px; 
max-width:1140px; 
height:348px !important; 
background-image:url(imgs/rpp-behind-the-scenes-hero2bg.jpg); 
background-position:center; /* IE fix */ 
-webkit-background-size: contain; 
-moz-background-size: contain; 
-o-background-size: contain; 
background-size: contain; 
background-repeat: no-repeat; 
} 

のようなものがまたここにフルコンテナの背景を得ることに大きなリンクだ見えます。 https://css-tricks.com/perfect-full-page-background-image/

サイドノートとして、短手を使用してすべてのCSSプロパティを組み合わせることもできます。

background: url(imgs/rpp-behind-the-scenes-hero2bg.jpg) no-repeat center center fixed; 

Answer 2

あなた.videobackground同じ画像が含まれているのdivが、あなたの背景画像との競合の上と下のDIVに2個のイメージがあります。

あなたは別のDIVでこれら3つのdivをラップし、 DIVことに背景画像を割り当てる（そして他の人からそれを削除する）必要があります

（もbackground-repeat: no-repeat、background-size: coverとbackground-position: center centerを使用してください） COMMENT AFTER

ADDITION：

あなたのHTMLコードは（一部）である：

<div class="bit-1"> 
    <img src="imgs/rpp-behind-the-scenes-hero1.jpg" width="100%"> 
</div> 
<div class="bit-1"> 
    <div class="videobackground"></div> 
</div> 
<div class="bit-1"> 
    <img src="imgs/rpp-behind-the-scenes-hero3.jpg" width="100%"> 
</div> 

私のようなものに上に書いたように

変更していること：CSSで

<div id="wrapper"> 
    <div class="bit-1"> 
    <!-- contents here, but no image --> 
    </div> 
    <div class="bit-1"> 
    <div class="videobackground"></div> 
    </div> 
    <div class="bit-1"> 
    <!-- contents here, but no image --> 
    </div> 
</div> 

、.videobackgroundから背景画像を削除し、

#wrapper { 
    background: url(imgs/rpp-behind-the-scenes-hero2bg.jpg) center center no-repeat; 
    background-size: cover; 
} 

今

3つのすべてのように、「#wrapper `に追加DIVは前に3つの部分画像を合わせるのではなく、1つの共通の背景画像を持つ。