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>

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.

• javascript
• jquery
• html
• css
• twitter-bootstrap-3

• Are you trying to get the text on top or underneath the translucent image? Your question is unclear. Reminder: Opaque means "can't see through", translucent means semi-transparent, and transparent, obviously, totally see through. – mix3d Commented Nov 8, 2016 at 18:48
• The solution, however, since you are trying to use css opacity to adjust the translucency of the image, is to use absolute positioning and z-indexing, so it takes it out of the rendering flow, allowing your "content" to render on top (or below, depending on how the z-indexing is done) – mix3d Commented Nov 8, 2016 at 18:50
• mix3d I want the image to be "faded" and in the background and the text "on top" not faded. Is that clearer? – dblwizard Commented Nov 8, 2016 at 18:58

5 Answers 5

This should do it for you. Bootstrap doesn't have a ponent for this, so you're stuck making it yourself.

How it works: By putting the img as the first child in the parent container, it gets drawn first. The absolute positioning guarantees it fills the parent container size, and the container's relative position means the children's absolute are relative to the parent container. (otherwise, the image would be absolute pared to the body, and fill up the entire window). Then, the Text is drawn, and as it is defined AFTER the image, rendered next, drawing on top of the image.

.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('https://source.unsplash./random/800x600');
  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>

try :

.background1 {
background:url('/Images/housing-4-1213183.jpg');
background-size:cover;
opacity: .25;
max-width: 1130px; 
}

and

<div class="well">
    <div class="row">            
        <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 you only want the background image (and not the text) to appear translucent try this:

.background1 { 
 background-image: linear-gradient(to bottom, rgba(255,255,255,0.3)0%,rgba(255,255,255,0.3) 100%), url("/Images/housing-4-1213183.jpg");
 background-size:cover;
 max-width: 1130px;
}

and in the HTML you'd want the div surrounding the content like this:

<div class="well">
 <div class="row">
  <div class="background1">
   <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>
</div>

Image faded in the background and text on top of it which is not faded. I believe if this is what you are looking for.

<!DOCTYPE html>
    <html>
      <head>
        <style>
              img {
              opacity: 0.5;
              filter: alpha(opacity=50); /* For IE8 and earlier */
              position: absolute;
              left: 0px;
              top: 0px;
               z-index: -1;
              }

             .container {
             position:relative;
             left:100px;
             top:100px;
              }

             .container h3 {
              position:absolute;
              top:50px;
              left:50px;
               }

         </style>
        </head>
      <body>

         <div class="container">
            <img src="https://encrypted-tbn1.gstatic./images?q=tbn:ANd9GcQBK3FmyjIENz16NWEl1iJcIWj8I5n8hs-rl5JPixzw-XppNfKx"   alt="Forest" width="170" height="100">
            <span>
              <h3>Hello
           </span>
         </div>

  </body>
</html>

the background image css should be for the container element, and not as a tag inside the content...

<div class="image">
   Text Content <!-- Right -->
</div>

<div>
   <img class="image" />  <!-- Wrong -->
   Text Content
</div>

.image{
   background-image : url(.../);
}