title: How to center and overlay image (on top of streaming webcam)
body: <p>Here's the code I'm currently working with:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.addEventListener('load', function () {
                  let selectedDeviceId;
                  const codeReader = new ZXing.BrowserBarcodeReader()
                  codeReader.getVideoInputDevices()
                      .then((videoInputDevices) =&gt; {
                          const sourceSelect = document.getElementById('sourceSelect')
                          selectedDeviceId = videoInputDevices[0].deviceId
      
                              codeReader.decodeFromInputVideoDevice(selectedDeviceId, 'video').then((result) =&gt; {
             window.location.href = 'https://www.example.com'
                              }).catch((err) =&gt; {
             window.location.href = 'https://www.example.com'
                              })
      
                      })
              })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,body {
       margin:0;
      }
      body {
       padding:45px 0;
       background-image: url("https://i.imgur.com/A9J4iWz.png");
          background-repeat: no-repeat;
          background-attachment: fixed;
          background-position: center;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;title&gt;Test Page&lt;/title&gt;
      &lt;/head&gt;
      
      &lt;body&gt;
          &lt;video id="video" width="100%" height="100%"&gt;&lt;/video&gt;
          &lt;script type="text/javascript" src="https://pastebin.com/raw/STztkMyB"&gt;&lt;/script&gt;
      &lt;/body&gt;
      
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This page will stream a live video from your webcam.</p>
  
  <p>I added this code to make an image overlay on top of the video, but I'm not sure why it isn't working:</p>
  
  <pre><code>body {
      padding:45px 0;
      background-image: url("https://i.imgur.com/A9J4iWz.png");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
  }
  </code></pre>
  
  <p>I've also tried adding z-index to the background image, but that didn't work.</p>
  
  <p>What's causing the video to always show up on top?</p>