title: Video background grid overlay issue
body: <p>This is probably a really obvious mistake that i'm missing, but anyway:</p>
  
  <p>I'm having an issue with using a video as a background for a website and overlaying it with a semi-transparent 4x4px png image as a grid. The grid just  overlaps the video, so the video should show through the repeated transparent image, but it just seems to disappear.</p>
  
  <p>Any help with this is appreciated immensely (even though it's probably just a really simple error on my behalf)</p>
  
  <p>Here's some screenshots of the problem:</p>
  
  <p><strong>Grid overlay issue</strong>
  <img src="https://i.stack.imgur.com/hqR7r.png" alt="Grid appearing, no video though">
  The grid appears, but no video through it (video looks like screenshot below)
  <img src="https://i.stack.imgur.com/SsqAk.jpg" alt="Video that should be showing through the grid"></p>
  
  <p>The grid is a repeated 4x4px png, the white 2x2px are transparent and the grey 2x2px are at 75% opacity.</p>
  
  <p>Here is grid.png blown up (too small to attach):</p>
  
  <p><img src="https://i.stack.imgur.com/Zp4NL.png" alt="blown up grid.png"></p>
  
  <p><strong>EDIT: grid.png attached</strong></p>
  
  <p><img src="https://i.stack.imgur.com/nVd1O.png" alt="grid.png"></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div id="container"&gt;
  
          &lt;div class="grid"&gt;&lt;/div&gt;
  
          &lt;!-- BG-VIDEO --&gt;
  
          &lt;video autoplay loop muted&gt;
              &lt;source src="video/video.mov" type="video/mp4"&gt;
          &lt;/video&gt;
          &lt;div class="content"&gt;
              &lt;center&gt;
                  &lt;div class="titlebox"&gt;
                      &lt;h1&gt;The Redtree Cafe&lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/center&gt;
          &lt;/div&gt;
  
  
  
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>*{
      margin: 0;
      padding: 0;
  }
  
  /* VIDEO */
  
  #container {
      position: fixed;
      overflow: hidden;
      width: 100%;
      height: 100vh;
  }
  
  
  .grid {
      background: url(img/grid.png);
      width: 100%;
      height: 100vh;
      z-index: 1000;
  }
  
  /*Front Page*/
  
  .titlebox {
      z-index: 2000;
  }
  </code></pre>