title: Overlay effect without position:fixed;
body: <p>I want to have a background-image with some overlay effect.</p>
  
  <p>see: <a href="https://jsbin.com/giqagidufe/edit?html,css,output" rel="nofollow noreferrer">https://jsbin.com/giqagidufe/edit?html,css,output</a></p>
  
  <p>The overlay effect should always be full screen size - also when resizing. I first did that using:</p>
  
  <pre><code>html, body { min-height: 100%; }
  
  // Background Image
  body {
      position: relative;
      background-image: url("/_Resources/Static/Packages/VMP.Website/Images/Header/header_full.jpg");
      background-position: top center;
      background-repeat: no-repeat;
      margin: 0px;
      background-color: black !important;
  }
  
  // Colored overlay of Background Image
  body::before {
      position:absolute;
      content: '';
      background-color: rgba(44, 62, 80, 0.7);
      min-width: 100%;
      height: 100%;
      z-index: -10; 
  }
  </code></pre>
  
  <p>so I used <code>position:absolute;</code> but that has the problem of not fully cover the whole screen. I thend used <code>position:fixed;</code> which solves the problem.</p>
  
  <p>but that forces the browser to rerender the whole thing on each scroll, so it's not the best option.</p>
  
  <p>Are there any other option I could do that? One which is more performant?</p>