<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tab for a Cause</title>
    <style>
      html, body {
        margin: 0px;
        padding: 0px;
        border: 0px;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .tab-iframe {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        border: none;
      }
    </style>
  </head>
  <body>
    <iframe class='tab-iframe' src='http://tab.gladly.io/newtab/'></iframe>
    <script type='text/javascript' src='./js/newtab.js'></script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tab for a Cause</title>
    <style>
      html, body {
        margin: 0px;
        padding: 0px;
        border: 0px;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: none;
      }
      .tab-iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        border: none;
      }
      #user-backround {
        opacity: 0;
        transition: opacity 0.8s ease-in;
        box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 120px inset;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        background-size: cover;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -100;
      }
    </style>
  </head>
  <body>
    <iframe class='tab-iframe' src='http://tab.gladly.io/newtab/'></iframe>
    <div id='user-background'></div>
    <script type='text/javascript' src='./js/newtab.js'></script>
  </body>
</html>

Add background element with CSS.
Add background element with CSS.
