dblwizard dblwizard - 29 days ago 24
CSS Question

Bootstrap content with opaque background image

I'm just learning Bootstrap and trying to figure out a good way to display content with an opaque background image. I'm currently using a "well" but don't have to. I can get the image "inside" the well and opaque but I can't get it "behind" the other content. Here is a small sample of the html:



.background1{
background-size:cover;
opacity: .25;
max-width: 1130px;
}

<div class="well">
<div class="row">
<img class="img-rounded background1" src="/Images/housing-4-1213183.jpg" alt="housing" />
<h2>Section Title Here</h2>
<p>This is just a place holder for text content that would be showed on top of the desired image.</p>
</div>
</div>





If there is a better class to use for the content please let me know.

Answer

This should do it for you.

.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>