performance boost on fixed background image

#css

#background

#background-image

#fixed

#cover

Sometimes you need a fixed background-image that, in most cases, covers the background.

The usual approach is to set the CSS-attributes background-attachment: fixed; and background-size: cover;

To get a performance boost (at least in chrome), you can take the background to a before element.

I got this method from the following blog-post, where you can read it in more detail:

https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property

So this is how its done normally:

.fixed-background {
 @include clearfix;
 border-top: 10px solid rgba(255, 255, 255, .46);
 background-color: white;
 background: url('/img/bg.jpg') no-repeat center center;
 background-attachment: fixed;
 background-size: cover;
 color: $white;
 padding-bottom: 4em;
}

And this gets you loaded faster:

.fixed-background {
 @include clearfix;
 border-top: 10px solid rgba(255, 255, 255, .46);
 color: $white;
 padding-bottom: 4em;
 overflow: hidden; // added for pseudo-element
 position: relative; // added for pseudo-element

 // Fixed-position background image
 &::before {
 content: ' ';
 position: fixed; // instead of background-attachment
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background-color: white;
 background: url('/img/bg.jpg') no-repeat center center;
 background-size: cover;
 will-change: transform; // creates a new paint layer
 z-index: -1;
 }
}

thats it.