full width background image like wordpress Twenty Seventeen

full-width-background-image.html

<header>
  
  <div class="fixed-header-image">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Nature_of_Empakaai_Crater_%289%29.jpg" />
  </div>
  
  <div class="site-branding">
    <h1 class="site-title"><a href="https://development.end-linkage.de/" rel="home">wp-dev</a></h1>
    <p class="site-description">wordpress theme development</p>
  </div>
  
</header>

<main></main>

full-width-background-image.scss

.fixed-header-image {
  height: 1200px;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
  
  img {
    position: fixed;
    height: auto;
    top: 50%;
    left: 50%;
    max-width: 1000%;
    min-height: 100%;
    min-width: 100%;
    min-width: 100vw;
    width: auto;
    padding-bottom: 1px;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
}

.site-branding {
  position: absolute;
  top:10%;
  right: 10%;
  display: block;
  background: rgba(255, 255, 255, 0.5);
  padding: 1rem;
  border-radius: 1rem;
  height: auto;
  padding-top: 0;
  max-width: 100%;
}
  


/* test styles */
main {
  background: white;
  min-height: 200vh;
  position: relative;
}

* {
  box-sizing: border-box;
}