Responsive Hero Section

By Laurel Beyers

F6
#
hero header image flexbox
How do I use This?

A responsive hero image with centered text overlaid.

HTML
<div class="hero-section">
  <div class="hero-section-text">
    <h1>Header</h1>
    <h5>subtitle about anything you like</h5>
  </div>
</div>



$hero-height: 60vh;

.hero-section {
  background: url('https://static.pexels.com/photos/248064/pexels-photo-248064.jpeg') 50% no-repeat;
  background-size: cover;
  height: $hero-height;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;

  .hero-section-text {
    color: $white;
    text-shadow: 1px 1px 2px $black;
  }
}



.hero-section {
  background: url("https://static.pexels.com/photos/248064/pexels-photo-248064.jpeg") 50% no-repeat;
  background-size: cover;
  height: 60vh;
  text-align: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.hero-section .hero-section-text {
  color: #fefefe;
  text-shadow: 1px 1px 2px #0a0a0a;
}
JS

Similar Building Blocks

media

Pull Quote

F6
by Rafi
media

News Image Gallery

F6
by Harry Manchanda
media

Featured Image Block grid

F6
by Kevin Ball