1

I'm trying to find a way to have a "responsive" image overlay the carousel from Twitter bootstrap.

I found How do i add a mask on top of a bootstrap element? which helped me with the overlay - but when I add the image to that div, it doesn't resize like the carousel.

From what I've read images in the bootstrap have max-width:100% - does that mean have to set a width for the overlay div?

Fiddle: http://jsfiddle.net/CF8m8/ - change the width of the result window to see what I mean.

Thankful for all help.

Community
  • 1
  • 1
nubje
  • 78
  • 1
  • 2
  • 6
  • do you want the overlay to resize as well? – Shail Feb 25 '13 at 02:38
  • @Shail : Thank you for your reply. Well, yes, I'd like to resize the image within the overlay is well, so it fits "inside" the carousel. – nubje Feb 25 '13 at 06:50

3 Answers3

4

YOu can do the following : Jsfiddle Jsfiddle with resized overlay

Jsfiddle in browsercheck in browser

Edit: I would suggest you to use different sizes of images to cater different screen , that way you wont loose the quality and even the ratio can be fixed according to your choice . Than load those images with media queries , so with every different screen you are serving them resized image which will fit well on to your carousal . 

<div class="container">
 <div class="carousel slide">
  <div class="carousel-inner">
    <div class="overlay"></div>
    <div class="item active">
        <a href=""><img src="http://www.placehold.it/900x500&text=One" /></a>
    </div>
    <div class="item">
        <a href=""><img src="http://www.placehold.it/900x500&text=Two" /></a>
    </div>
    <div class="item">
        <a href=""><img src="http://www.placehold.it/900x500&text=Three" /></a>
    </div>
 </div>
 <a class="carousel-control left" href=".carousel" data-slide="prev">‹</a>
 <a class="carousel-control right" href=".carousel" data-slide="next">›</a>
  </div>
 </div>

In css use the following :

.overlay {
background: url(http://lorempixel.com/310/310/cats/) top left no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
  }
     @media (min-width: 768px) and (max-width: 979px) {
      .overlay{

         width:50%;
        height:50%;
  }    
 }

  @media (max-width: 767px) {
     .overlay{

  width:50%;
  height:50%;
  }

  }
@media (max-width: 480px) {
   .overlay{
   width:50%;
  height:50%;

  }
}
Shail
  • 3,639
  • 1
  • 18
  • 29
  • Thanks! That's kind of what I'm after, but is there any way to have it resize the image, keeping the aspect ratio, instead of clipping it? It's for a logo - don't know if it's best practice to resize it though - maybe I'm better of creating new versions of the image instead. – nubje Feb 25 '13 at 12:11
  • it gets clipped because we are resizing it to an abnormal level , an optimized image will behave more properly . And I have show you the way to do it . The other wwat you can do is create different size images to serve different screen sizes and than insert them into the queries I have written above , that way the sizing and qualiy can be controlled . Let me know if you need more help – Shail Feb 25 '13 at 12:17
  • What do you mean by "optimized image"? From my tries, the carousel get resized and not clipped, so if the overlay could behave the same that would be perfect. I also tried with different sized images, but there's lots of media queries to do :) – nubje Feb 25 '13 at 17:11
  • I have updated the answer . By the way by optimized I mean , you can use photoshop and create 3 different versions of your logo , resized and modified to suit screen sizes . – Shail Feb 26 '13 at 00:51
  • @Shail hey how to make the image change dynamically? how to set the image overlay via javascript? – jboxxpradhana Jan 15 '16 at 09:33
4

I think there is a better solution. @Shail. I will use your example itself.

Add an image like I shown below to the div=overlay and add the class "image-responsive". Then bootstrap will take care of the rest. 

<div class="overlay">
<img src="images/slideshowfx.png" class="image-responsive"/>
</div>

I used the size width="1200px" and height="300px(or whatever height you want)"

After removing the unnecessary styles, the CSS would be like this.

.overlay {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

This is all that you need to do. You can eliminate all the other unnecessary CSS styles.

Philip Kurian
  • 49
  • 2
1

The best bet to get your image to resize without media queries is going to be to give your image a class of "img-responsive".

Bootstrap has already built the necessary media queries and will scale your image down to scale. Remember to not have a fixed height to the container that the image is in, or the scale down will only affect the width, as your fixed height will likely override any previous css for scaling the height.

As for the overlay part...that has been sufficiently answered above.

Brandon Gibbs
  • 13
  • 7