Bootstrap full-width hero section with text and image

bgimage.css

.bgimage {
  width:100%;
  height:500px;
  background: url('https://images.unsplash.com/photo-1438109491414-7198515b166b?q=80&fm=jpg&s=cbdabf7a79c087a0b060670a6d79726c');
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-attachment: fixed;
}
.bgimage h5 {
  color:white;
  text-shadow:2px 2px #333;
}

bgimage.html

<section class="bgimage">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h5>Hello, world! Full width Hero-unit header</h5>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>
      </div>
    </div>
  </div>
</section>