Full Page Background Image

HTML

<section class="about" style="">
  <div class="text">
     first-col  <br/>
     first-col  <br/>
     first-col <br/>
     first-col  <br/>
     first-col  <br/>
     first-col <br/>
  </div>
    <div class="text">
       second-col  <br/>
       second-col  <br/>
       second-col <br/>
       second-col  <br/>
       second-col  <br/>
       second-col <br/>
    </div>
    <div class="text">
       third-col  <br/>
       third-col <br/>
       third-col <br/>
    </div>
</section>

CSS

.about {
  width: 100%;
  height: 100%;
  position:relative;
}
.about:after{
   content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background:url('http://i.imgur.com/tENv1w4.jpg') no-repeat center center; 
    width: 100%;
    height: 100%;
    opacity : 0.55;
    z-index: -1;
}

.text {
  color: #fff;
  font-size: 22px;
  text-align: center;
}