[My Result](http://imgur.com/6ylQj8D)

[Desired Result](http://imgur.com/vZIAkrO)

I have an overlay color with 0.6 opacity over my huge background picture; but this overlay darkens the text (h1 and h2 from the middle)

```css
.jumbotron {
  position: absolute;
  width: 100%;
  height: 57.5%;
  background: url("../img/bg2.jpg") no-repeat center center fixed;
  padding-top: 5%;
  text-align: center;
}
.jumbotron h1 {
  display: inline-block;
  padding: 10px;
  border: 5px solid white;
}
.bg-overlay {
  position: absolute;
  left: 0;
  right: 0;
  height: 57.5%;
  z-index: 0;
  background: #424252;
  opacity: .6;
}
```

```html
<header>
  <div class="main-header">
    <div class="jumbotron">
      <div class="container">
        <div class="content">
          <!-- This whole DIV I want to be visible -->
          <h2>AN EASY WAY TO BUILD A WEBSITE</h2>
          <hr/>
          <h1>WITH MINT</h1>
        </div>
        <!-- end content-->
      </div>
      <!-- end container-->
    </div>
    <!-- end jumbotron-->
    <div class="bg-overlay"></div>
    <!-- This is the overlay -->
  </div>
  <!-- end main-header-->
</header>
```

Giving the navbar-brand and anchor elements opacity worked, but I can't manange to do it for the content