Twitter Bootstrap Question posted in

overlap a text on a image with bootstrap – Twitter bootstrap

This is my first post on stackoverflow!

I’m trying to overlap a text on a div that contain an image with Twitter Bootstrap. I work on a website with a PSD and I’ve got to make some parallaxes of text, that sometimes half-overlap some images.

But I heard that z-index don’t work with bootstrap, does it?

I tried with the thumbnail class trick but it does not seem to me to be a good solution. I Post my code and I hope someone can help me. Thanks.

.thumbnail {
    position:relative;
}

.thumbnail_legend {
    background: none repeat scroll;
    opacity: 1;
    left:0;
    position: absolute;
}

.organic{
  margin-top:3%;
}

.organic img{
  width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="organic container">
    <div class="row">
      <h2 class ="col-xs-2 col-xs-offset-2 col-sm-2 col-sm-offset-2 col-md-2 col-md-offset-2 col-lg-2 col-lg-offset-2">ORGANIC
      </h2>
      <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7 thumbnail"><img src="elem/photo-1-idea.jpg" alt="organic infusions"/>
      </div>
      <p class="col-xs-4 col-xs-offset-2 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2 thumbnail_legend"> Nos infusions en tige  offrent une nouvelle façon de consommer les plantes issues de terroirs exceptionnels.
      </p>
    </div>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    so, I've done these changes and that works : 

    .organic{
  position: relative;
  margin-top:3%;
}

.organic img{
  top: 0;
  width: 100%;
}

.organic h2 {
  position:absolute; top:0; z-index:10;
}
.organic p {
  position:absolute; top:50px; z-index:10;
}
    <div class="organic container">
      <div class="row">
        <div class="col-xs-7 col-xs-offset-4 col-sm-7 col-sm-offset-4 col-md-7 col-md-offset-4 col-lg-7 col-lg-offset-4"><img src="elem/photo-1-idea.jpg" alt="organic infusions"/></div>
        <h2 class="col-xs-2 col-xs-offset-2 col-sm-2 col-sm-offset-2 col-md-2 col-md-offset-2 col-lg-2 col-lg-offset-2"> ORGANIC</h2>
        <p class="col-xs-4 col-xs-offset-2 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2"> Nos infusions en tige  offrent une nouvelle façon de consommer les plantes issues de terroirs exceptionnels.</p>
      </div>
    </div>


  2. 0

    use position:absolute to all dom element, which you want to put above the image.

    .thumbnail {
    position:relative;
}
.thumbnail img {
    position:absolute;
}
.thumbnail_legend {
    padding:10px;
    position: absolute;
}

.organic{
  margin-top:3%;
}
.organic h2 { position:absolute;padding-top: 0;z-index:2; padding-left:10px;}
.organic p { position:absolute; padding-top: 15%; z-index:2;}
.organic img{
  width: 100%;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="organic container">
    <div class="row">
      
      <div class="col-xs-8 col-xs-offset-2 thumbnail">
        <img src="http://www.kriesi.at/themes/enfold/wp-content/themes/enfold/config-layerslider/LayerSlider/avia-samples/slide2_browser.png" alt="organic infusions"/>
      
      <h2>ORGANIC</h2>
      <p class= "thumbnail_legend"> Nos infusions en tige  offrent une nouvelle façon de consommer les plantes issues de terroirs exceptionnels.
      </p>
    </div>
</div>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search