Sticky header with scrolling background
<p>I made a (sticky) header for one of my clients.
The background is fixed. So when the page is scrolled, the background seems to slide behind the element. Until the header sticks.</p>

<p>My client wants the background to still scroll through the element (with the page scroll), when the header is sticked to the top.</p>

<pre><code>header {
    display: block;
    position: relative;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0;

    background-image: url( '../img/background.png' );
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

header.sticky {
    display: block;
    position: fixed;
}
</code></pre>

<p>Anyone an idea on how to do this?</p>

<p>The pseudo elements ::before and ::after are already in use.</p>