Overlay effect without position:fixed;
<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>