Bootstrap- background image with content overlay

 .btn {
  z-index: 100;
}

.covered{
  position:relative; /* make a new "render context", so absolute positioning is relative to this parent container */

  padding:30px; /* only needed for this demo */
}

.covered-img{
  background:url('http://kingofwallpapers.com/random-image/random-image-001.jpg');
  opacity: .25;

  background-size:cover; /* cover will scale the image so that the smallest dimension = the widest dimension of the box */
  background-position:center; /* vs the top-left that is default */
  
  position:absolute; /* take me out of the render context! let me define my own positioning */
  top:0;bottom:0;left:0;right:0; /* this could also work with width:100%; height:100%;, but is simpler */
}

<div class="row">
  <div class="col-xs-12 covered">
     <div class="covered-img"></div>
    
     <h3>Dat content doe</h3>
     <p>So much glorious content</p>  
  </div>
 </div>

div {
    background-image:url(smiley.gif);
    background-repeat:no-repeat;
    background-size: 100%;
}

-webkit-overflow-scrolling: auto

img#bg-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

#weather-wrapper.sunny {
    background-image: url(images/sunny.png);
}

#weather-wrapper.rainy {
    background-image: url(images/rainy.png);
}

/* etc. */