Mastheads using Sass

Learn how-to create simple partial and full screen mastheads using Sass.

Partial Screen Masthead

HTML

<div class="masthead">
  <h1>Welcome.</h1>
</div>

Sass

body, html {
  height: 100%;
  margin: 0;
  font-family: 'Open Sans', Arial, sans-serif;
}
.masthead {
  background-color: #22a7e0;
  background-image: url(https://images.unsplash.com/photo-1603568301602-3924e87dc8d6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 50%;
  h1 {
    margin: auto;
    color: #fff;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
  }
}

Full-screen Masthead

HTML

<div class="masthead">
  <h1>Welcome.</h1>
</div>

Sass

body, html {
  height: 100%;
  margin: 0;
  font-family: 'Open Sans', Arial, sans-serif;
}
.masthead {
  background-color: #22a7e0;
  background-image: url(https://images.unsplash.com/photo-1578326457399-3b34dbbf23b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  h1 {
    margin: auto;
    color: #fff;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
  }
}
Brandon Himpfen
Blogger. Developer. Designer. Programmer. Photographer. Traveller. Digital Marketer. Gamer.