dblwizard dblwizard - 1 year ago 84
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:

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>

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

Answer Source

This should do it for you.

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

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

  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>  

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download