画像が正しく表示されない

Question

背景画像全体にオーバーレイとして小さな画像を繰り返して表示しようとしていますが、動作していません。私はこの点に着目し、私が考えることができるすべての多数のものを試しました。助言がありますか？ コード：

.overlay { 
 
\t position: relative; 
 
\t z-index: 2; 
 
\t overflow: hidden; 
 
\t opacity: 0.7; 
 
\t background: #000 url(../media/overlay.png) repeat; 
 
    } 
 

 
    .content { 
 
    position: relative; 
 
    top: 30%; 
 
    z-index: 3; 
 
    margin: 0 auto; 
 
    max-width: 720px; 
 
    text-align: center; 
 
    } 
 

 
    .video { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    z-index: 1; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    -webkit-transform: translate(-50%, -50%); 
 
     -ms-transform: translate(-50%, -50%); 
 
      transform: translate(-50%, -50%); 
 
    }

<div> 
 
\t <div class="overlay"> 
 
\t \t <img src="/media/overlay.png" /> 
 
\t </div> 
 
\t <div class="content"> 
 
\t \t <h1 class="content__heading"><img src="/media/logo.png" /></h1> 
 
\t \t <p class="content__teaser"> tba. </p> 
 
\t \t <a href="#" class="content__cta"> tba.</a> 
 
\t </div> 
 
\t <video id="my-video" class="video" muted loop> 
 
\t \t <source src="media/bg.mp4" type="video/mp4"> 
 
\t </video></div>

Answer 1

あなたoverlayは繰り返し背景を表示するのに十分な大きさではありません。

はoverlayフルページを作ってみてください。

.overlay { 
    width: 100%; 
    height: 100%; 
} 

すでにCSSの背景を使用して画像を表示するので、あなたは、HTMLで<img>を含める必要はありません。

実施例hereを参照してください（注：私は、オーバーレイは、ページの全体の高さをカバーするよう.overlayposition: absoluteをしなければならなかった）