htmlタグのビデオの前に繰り返し画像を追加する

Question

動画でdivを作成し、動画の前に繰り返しpng画像（小さな正方形1x1px）を追加したいと思います。

HTML私は私の二乗の背景を置く場所それは問題ではありません

#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%); 
} 

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

CSS、私はいつもそれなしで動画を参照してください。

私はZ-インデックスで試してみましたが、動作しません。

Answer 1

コメントに記載されているように、#video-background divを#video-wrap divに入れてください。また、私はそれを動作させるためにCSSのいくつかを調整しています

#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>