Fügen Sie ein wiederholtes Bild vor einem HTML-Tag Video

Question

Ich erstellte ein div mit einem Video und vor dem Video möchte ich ein wiederholtes png Bild hinzufügen (kleine Quadrate 1x1px).

HTML

<div id="video-background"></div> 
<div id="video-wrap"> 
    <video id="loop-video" loop preload="auto" src="vid.mp4" autoplay> 
    </video> 
</div> 

CSS

#video-background { 
    overflow: hidden; 
    top: 0; 
    left: 0; 
    position: absolute; 
    width: 100%; 
    height: 600px; 
    background-image: url('../img/imgtrama.png'); 
    background-repeat: repeat; 
} 
#video-wrap { 
    overflow: hidden; 
    top: 0; 
    left: 0; 
    position: absolute; 
    width: 100%; 
    height: 600px; 
} 
#video-wrap #loop-video { 
    width: 100%; 
    height: auto; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Es ist egal, wo ich meine squared Hintergrund setzen, ich, ohne es sehen, das Video immer.

Ich habe versucht, mit dem Z-Index zu spielen, aber es funktioniert nicht.

Answer 1

Wie in den Kommentaren erwähnt, setzen Sie die #video-background Div innerhalb der #video-wrap Div. Ich habe auch einige der CSS angepasst, damit es funktioniert:

#video-background { 
 
    top: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url('http://placehold.it/50x50'); 
 
    background-repeat: repeat; 
 
    opacity: .8; 
 
} 
 
#video-wrap { 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
#video-wrap #loop-video { 
 
    width: 100%; 
 
}

<div id="video-wrap"> 
 
    <video id="loop-video" loop preload="auto" src="http://techslides.com/demos/sample-videos/small.mp4" autoplay></video> 
 
    <div id="video-background"></div> 
 
</div>