[CSS] Hidden Header ✤✤

Damit es hier auch mal wieder was zu lesen gibt, ausser das Versprechen, dass es denn bald wieder losgeht, schreibe ich jetzt mal wieder ein kleines Tutorial. Die ganzen Deadlines und der Weihnachtsstress haben mich nun doch etwas sehr eingeholt, aber als ich heute Morgen gefragt wurde, wie man denn einen Header macht, der sozusagen hinter dem Content liegt, wollte ich unbedingt eine Anleitung dazu für euch schreiben. Und hier kommt sie nun.

First of all so sorry for being a little lazy with my English in the posts, but the neglecting will hopefully end really soon. There are just a couple of deadlines and the necessary Christmas Stress right now that have been keeping me a little too busy. But when I was asked today how you'd create a header that lies behind the content, I wanted to write it for you.

English Deutsch

Okay, ein Header der hinter dem Content liegt. Aussehen wird das ganze am Schluss so:

Okay, A header that lies behind the content. This will end up looking like this:

See the Pen dPXOXR by Myri (@bekreatief) on CodePen.

Wir beginnen mit einem ganz einfachen Markup. Fixierte Navigation, dann der header und eine section für den content.

We'll start off with just some very simple markup. A fixed nav, header and a section for the content.

<nav>
    <a href="#">item 1</a>
    <a href="#">item 2</a>
    <a href="#">item 3</a>
</nav>
<header>
    <h1>Heading</h1>
</header>
<section>
    <p>Content</p>
</section>

Die CSS dazu ist ganz simpel. Was wir tun ist die Navigation oben zu fixieren. Wir geben ihr dann einen z-index von 2. Das heisst, dass sie über dem Header und dem Content liegen wird.
Dem Header verpassen wir das Bild als Hintergrundbild. Ich habe mit einer fixen Höhe gearbeitet, aber wenn ihr da ein bestimmtes Format haben wollt, das variabel ist, seht euch meinen Post zum padding hack an. Das Hintergrundbild fixieren wir.
Den Text platzieren wir dann oben drüber. Und dann geben wir dem Header einen z-index von -1.
Damit das nachher verdeckt werden kann, muss der Content einfach eine Hintergrundfarbe haben.

The CSS is very simple. What we do is fix the navigation to the top with a z-index: 2. This will put it above everything.
For the header we'll define a background image, which is attached fixed as well. I gave mine a height in px, but if you want your header in a specific aspect ratio, check out my post about the padding hack.
The text will be placed on the header. And then we'll give the whole header a z-index of -1.
In order for the header to be covered on scroll, all we need to do after is give the section a background color.

// Sass
nav{
    width: 100%;
    background: darken($teal, 5%);
    position: fixed;
    z-index: 2;
}

header{
    background: {
        image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzTnJSCfXmtwKIn_6X8zMvoxc8iVmpVg_GDM9WBkL1g9qttPRNzKM21WdFePxHRq0V_zhRh-urjTrVVMyNc2w-sQ6Ji8mHqVFnkrOmU2c2VezTynqFGNfvvGT_kiJ7CEP3mh0s_dTT9QPC/s1600/color2.png);
        attachment: fixed;
    }
    height: 450px;
    position: relative;
    z-index: -1;
  
    @media screen and (max-width: 631px){
        height: 300px;
    }
  
    h1{
        font-size: 100px;
        position: fixed;
        top: 150px;
        width: 100%;
        height: auto;
        z-index: -1;
        
        @media screen and (max-width: 631px){
            font-size: 50px;
        }
    }
}

section{
    position: relative;
    z-index: 1;
    background: white;
}

Und das ist im Grunde das, was den ganzen Trick ausmacht. Ganz simpel. Dann einfach nach Belieben gestalten. Meine generierte CSS sieht dann am Ende so aus:

And that's basically everything you need to do. Very simple. And then just go on designing however you want it. My compiled CSS ends up looking like this:

nav {
    width: 100%;
    background: #00808d;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    padding: 0px 15%;   
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: 2;
}

 nav a {
    padding: 15px 0px;
    color: white;
}

 nav a:hover {
    color: #ff1744;
}

header {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzTnJSCfXmtwKIn_6X8zMvoxc8iVmpVg_GDM9WBkL1g9qttPRNzKM21WdFePxHRq0V_zhRh-urjTrVVMyNc2w-sQ6Ji8mHqVFnkrOmU2c2VezTynqFGNfvvGT_kiJ7CEP3mh0s_dTT9QPC/s1600/color2.png);
    background-attachment: fixed;
    height: 450px;
    position: relative;
    z-index: -1;
}

header h1 {
    color: white;
    font-size: 100px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 0px 0px 1px black;
    position: fixed;
    top: 150px;
    width: 100%;
    height: auto;
    z-index: -1;
}

@media screen and (max-width: 631px) {
    header {
        height: 300px;
    }

    header h1 {
        font-size: 50px;    
    }
}

section {   
    min-height: 300vh;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    background: white;
    -moz-box-sizing: border-box;    
         box-sizing: border-box;
    padding: 20px 15%;
}