レスポンシブなヘッダーイメージが小さいスクリーンで繰り返される

Question

小さいスクリーンでは、私の現在のヘッダーは、レスポンシブのために@media CSSスタイリングを使用したいサイズにまで下がりました。しかし、私のヘッダーの画像は背景画像なので、縮小するとそれが繰り返されます。私はそれをカバーするために切り替えてみましたが、画像は元のサイズに戻ってしまいますので、画像の小さなスニペットを表示するだけです。ここで私が見ているコードはあります。

ページ - http://outsidetheline.co.uk/01.html（トップ画像ヘッダコンテナを中心に）

HTML：

<section class="meta-wrapper parallax" style="background-image: url('content/single_blog_bg.png');" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="20"> 
    <div id="page_header" class="mini-padding"> 
     <div class="container-fluid"> 


     </div> 
    </div><!-- end page_header --> 
</section><!-- end section --> 

CSS。

@media only screen and (max-width: 767px) 
.parallax { 
    position: relative; 
    background-attachment: fixed; 
    background-position: center; 
    background-size: contain; 
} 

@media only screen and (max-width: 767px) 
#page_header .container-fluid { 
    padding: 20rem 0 0; 
} 

背景画像CSSは要素スタイルから来ています。 私は余白のようないくつかのことを試しました：auto、カバーなどではなくカバーしていますが、画像が綺麗にフィットするよりもむしろ巨大に表示されます。

Answer 1

あなたが必要です：

background-repeat: no-repeat; 

Answer 2

使用background-repeat: no-repeat：

@media only screen and (max-width: 767px) 
.parallax { 
    position: relative; 
    background-attachment: fixed; 
    background-size: contain; 
    background-repeat: no-repeat; 
}