モダール全体を画像でカバーする

Question

マテリアライズCSSを使用しています。私はモーダルを持っていて、全体の背景をイメージに設定したいのです（開かれたときに、ウェブページの背景がぼやけていてイメージが美しく見えるように見えます）。問題は、私がこれを行うと、モーダルがそれよりも大きければイメージが繰り返されるということです。

私はイメージをモーダル全体に伸ばしてほしいです。

私のモーダル：

<div id="imageModal" class="modal"> 
    <div class="modal-content"> 

    </div> 
</div> 

CSS：

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-reapeat: "none"; 
    height: 50%; 
    width: 100%; 
} 

Answer 1

あなたが背景リピートといくつかのタイプミスがありました。これを試してみてください：

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-repeat: no-repeat; 
    height: 50%; 
    width: 100%; 
} 

をまた、あなたはCSS3を使用している場合、あなたはそれがあなたのモーダルのサイズに応じて画像のサイズを変更するのに役立ちますcoverからbackground-sizeプロパティを設定することができます。このように：

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    height: 50%; 
    width: 100%; 
} 

Answer 2

こんにちはちょうどuは背景リピートを持つスタイルを検査し、チェック...あなたのスタイルに

background-repeat: no-repeat; 

を追加：ストライクアウトで、いずれもすでにそのようにはスタイルがないbeczありませんので、ちょうど上記1

Answer 3

を置き換えるリファレンス

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-reapeat: no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 50%; 
    width: 100%; 
} 

これを試してみるここ

https://css-tricks.com/perfect-full-page-background-image/