<div id="wrapper">
   
    <header>
      
      <h1>HEADING</h1>

    </header>
    
</div>

body {
  background-color: dodgerblue;
  margin: 0;
}

/* Constrains the height while maintaing full width while centering the page's content. */

#wrapper {
  margin: 0 auto;
  width: 100%;
}

header {
  height: 180px;
  width: 100%;
  overflow: hidden;
  background: white url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/8F830E9235.jpg') no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  /* The two lines below make the photo opaque. No Apacity = 1  Full Opacity = 0  :-) */
  opacity: 0.6;
  line-height: 2.8em;
}

h1 {
  margin-top: 1em;
  font-family: Arial, San-serif;
  font-size: 70px;
  Text-align: center;
  color: limegreen;
  width: 100%;  
}


/*  filter: alpha(opacity=60); */