Fix for Twenty Seventeen’s stucking header

As you may have noticed, I’m using a customized version of the WordPress theme „Twenty Seventeen“ for this blog. In general, the theme is pretty nice, but there’s a little „bug“ (?) that has bothered me for a while.

You can see it in the video above. When a page isn’t finished loading, the whole body seem to stuck over the header and then crashes in its actual place.

Here’s my fix for this:

body:not(.twentyseventeen-front-page) .custom-header {
	margin-bottom: 72px;
}

How to apply this

Just use the WordPress Customizer, go to „Custom CSS“ and insert the code.

Code snippet: The easiest way for a parallax background with CSS and JavaScript

Here is the JavaScript part:

window.addEventListener("scroll", event => {
    document.body.style.backgroundPosition = "0px -" + (window.pageYOffset / 2) + "px";
});

Here is how the CSS part may look like:

body {
    background-image: url(./images/bg1.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed; // this is important
}

 

Here is an example of the result: