JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">header</div>
<div class="content">content met je plaatje

    
    <div class="text">hier je tekst e.d. onderaan<br />En blijft onderaan ook bij meerdere zinnen</div>
    
</div>
<div class="scrollContent">Content die je alleen ziet als je scrolled</div>

CSS

html, body {
    height:100%;
    margin:0px;
    padding:0px;
}

.header {
    height:55px;
    position:fixed;
    background-color: grey;
    width:100%;
    z-index:1;
  
}

.content {
   
    height:100%;
    padding-top:55px;
    margin-bottom:-55px;

    
    background: url('http://www.virtual-life.net/test/source/assets/img/cow.png') no-repeat center center;
    background-size:cover;
    background-color: red;    
}



.scrollContent {
    height:100%;
    width:100%;
    background-color:blue;
}

.text {
    position:absolute;
    bottom:0;
    width:100%;
    background-color:white;
}