Twitter Bootstrap Question posted in

How to get divs over an image using Twitter Bootstrap

I’m trying to show an image and divide it using bootstrap div columns, but the image is over the divs, so I can’t click or bind jQuery to it. Here is my code:

#viewer {
    left: 0px;
    position: absolute;
    height: auto;
    margin-top: 16px;
    margin-bottom: 34px;
}

#left {
    cursor: pointer;
    height: auto;
}

#center {
    cursor: pointer;
    height: auto;
}

#right {
    cursor: pointer;
    height: auto;
}

<div class="container">
    <img class="img-responsive" src="wp-content/themes/Cassia/img/back.jpg" id="viewer">
        <div class="row">
            <div id="left" class="col-sm-5 col-md-5 col-lg-5 col-xs-5">
            </div>

            <div id="center" class="col-sm-3 col-md-3 col-lg-3 col-xs-4">
            </div>

            <div id="right" class="col-sm-4 col-md-4 col-lg-4 col-xs-3">
            </div>

        </div>

</div>

What am doing wrong here?

Tags:

2

Answers


  1. 0

    To make the image go behind you can add a negative z-index like this:

    #viewer {
  top:0;
  left: 0;
  position: absolute;
  height: auto;
  margin-top: 16px;
  margin-bottom: 34px;
  z-index: -1;
}
#left {
  cursor: pointer;
  height: auto;
}
#center {
  cursor: pointer;
  height: auto;
}
#right {
  cursor: pointer;
  height: auto;
}
    <div class="container">
  <img class="img-responsive" src="http://gillespaquette.ca/images/stack-icon.png" id="viewer">
  <div class="row">
    <div id="left" class="col-sm-5 col-md-5 col-lg-5 col-xs-5">Left
    </div>

    <div id="center" class="col-sm-3 col-md-3 col-lg-3 col-xs-4">Center
    </div>

    <div id="right" class="col-sm-4 col-md-4 col-lg-4 col-xs-3">Right
    </div>

  </div>

</div>
    Login or Signup to reply.
  2. 0

    It might be a little tricky, I did it using JS, maybe there is a simpler solution but anyways, I hope this helps:

    JS Fiddle

    I added some JS to solve the absolute positioning making parent element have 0 height and thats it.

    $( document ).ready(function() {
    $( ".row" ).each(function() {
        var newHeight = 0, $this = $( this );
        $.each( $this.children(), function() {
            newHeight += $( this ).height();
        });
        $this.height( newHeight );
    });
    $('.row > div').css('height', '100%');
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search