Image not repeating properly - html

Question

I'm trying to make a small image repeat as an overlay across the entire background video, but it just isn't working. I got it to this point and I've tried every multitude things I can think of. Any suggestions?
Code:
.overlay {
position: relative;
z-index: 2;
overflow: hidden;
opacity: 0.7;
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>
<div class="overlay">
<img src="/media/overlay.png" />
</div>
<div class="content">
<h1 class="content__heading"><img src="/media/logo.png" /></h1>
<p class="content__teaser"> tba. </p>
tba.
</div>
<video id="my-video" class="video" muted loop>
<source src="media/bg.mp4" type="video/mp4">
</video></div>

Answer 1

Your overlay isn't big enough to show the repeating background.
try making the overlay full-page:
.overlay {
width: 100%;
height: 100%;
}
You don't need to include the <img> in the HTML, since you already display the image using a CSS background.
See a working example here (Note: I had to make .overlay position: absolute so that the overlay covers the whole height of the page)