Twitter Bootstrap 3 - Columns "inside" an image

Question

I am trying to display 3 columns on top of an image. I have to avoid setting this image as background-image in CSS, what I would like to achieve is having it as an <img> element on top of which there would be three columns.

I tried putting an image into a 12-wide column (col-md-12) and then inside that column creating a row of three 4-wide (col-md-4) columns.

In my example below you can see that I have six columns in two rows. First row has two empty columns and one column with "TEST" inside it, each is 4-wide (col-md-4). Whenever I set <img> to position:absolute I want only the first row to go up on top of the image. Sadly, both of those rows go up.

My HTML:

<div class="container">

                <div class="row">
                    <div class="col-md-12">
                        <img class="img-responsive featured" src="http://www.backgroundsy.com/file/large/red-coffee-cup.jpg" />
                        <div class="row">
                            <div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
                            </div>
                            <div class="col-md-4 col-sm-6 hidden-xs">
                            </div>
                            <div class="col-md-4 col-sm-6 hidden-xs">
                            TEST
                            </div>                          
                        </div>                  
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4 col-sm-6 post">
                        <h4>Blahblah</h4>
                        <p>Blaah</p>
                    </div>
                    <div class="col-md-4 col-sm-6 post">
                        <h4>Blahblah</h4>
                        <p>Blaah</p>
                    </div>
                    <div class="col-md-4 col-sm-6 post">
                        <h4>Blahblah</h4>
                        <p>Blaah</p>
                    </div>                  
                </div>

</div>

My CSS (position:absolute is commented out, please remove the comment tags to see what happens, I only want the first row to be on top of the image):

body {
  padding-top: 50px;
}

.featured {
    /* position:absolute;    */
}

Bootply example

Is there a fault-proof method to make that work and to make it as much cross-browser as possible?

Answer 1

Ok, if I got it properly what you need is this:

<div class="row first">
  <img src="photohere.jpg">
  <div class="col-md-4 col-sm-6">
     test1
  </div
  <div class="col-md-4 col-sm-6">
    test2
  </div
  <div class="col-md-4 col-sm-6">
    test3
  </div
</div>

use this class:

.first {
 position:relative;
}
.outer > img {
  position:absolute;
}
.outer > div {
  position:relative;
  z-index:2;
}

Answer 2

The parent of the absolutely positioned element needs the height of the absolutely positioned element at any given point in order for the content below it to not be affected. Read up on why that is when you learn about absolute, fixed, static, and relative positioning. This knowledge is part of basic CSS: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Since you are using a responsive image, the height is variable. So you have to keep that parent open somehow and it has to be fluid height. You can use padding-top on a pseudo element and then position the image and the content inside the area where the image is positioned in the background. You will need to adjust this based on the image as each value is specific to this situation and not generic situations.

Learn about aspect ratio: http://www.fredparke.com/blog/css-padding-trick-responsive-intrinsic-ratios

Demo: http://jsbin.com/vijagu/1/

Your viewport must be greater than or equal to the min-width where this CSS is used. Under that, you will need to create another solution such as leave it alone or adjust all the values and make other media queries.

http://jsbin.com/vijagu/1/edit

HTML (your code had 18 col per row, it's only 12. And you don't need to nest have you have done.)

<div class="container">
   <div class="row img-row">
      <div class="content">
         <div class="col-md-4">Column 1 Text goes here Text goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes here
         </div>
         <div class="col-md-4">2 Text goes here Text goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes here
         </div>
         <div class="col-md-4">3 Text goes here Text goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes hereText goes here
         </div>
         <img class="img-responsive" src="http://www.backgroundsy.com/file/large/red-coffee-cup.jpg">
      </div>
   </div>
   <!-- second row -->
   <div class="row">
      <div class="col-md-4 post">
         <h4>Blahblah</h4>
         <p>Blaah</p>
      </div>
      <div class="col-md-4 post">
         <h4>Blahblah</h4>
         <p>Blaah</p>
      </div>
      <div class="col-md-4 post">
         <h4>Blahblah</h4>
         <p>Blaah</p>
      </div>
   </div>
</div>

CSS:

@media (min-width:992px) { 
    .img-row {
        position: relative
    }
    .img-row .content > img {
        margin-top: -20%;
        position:absolute;
        z-index:-1;
    }
    .img-row:before {
        padding-top: 75%;
        display: block;
        content: "";
    }
    .content {
        top: 10%;
        right: 0;
        position: absolute;
        left: 0;
        bottom: 0;
    }
}
/* write media queries for the sizes under this otherwise it will just stack with the html order */