CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Tom Withers
Tom Withers

Reputation: 1181

Bootstrap Overlay image not responsive

I'm using this CSS Code to make an image overlay on top of a slider in bootstrap but when resizing down the image is not responsive:

.overlay {
background: url(../img/bocSlider.png) top left no-repeat;
position: absolute; 
background-position: center;
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%;

  }
}

Below is the HTML for the slider that I am using: 

    <div id="myCarousel" class="carousel slide">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>
      <div class="carousel-inner">
        <div class="overlay" class="img-responsive"></div>
        <div class="item active">
          <img src="/img/Bar.jpg" class="fill">
        </div>
        <div class="item">
          <img src="/img/Outside.jpg" class="fill">
        </div>
        <div class="item">
          <img src="/img/Table_1.jpg" class="fill">
        </div>
        <div class="item">
          <img src="/img/Tables_2.jpg" class="fill">
        </div>
      </div>
      <!-- Controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
      </a>  
    </div>

Could someone please help me fix this issue?

Image is a .png

Upvotes: 2

Views: 870

Answers (2)

Manish Rane
Manish Rane

Reputation: 579

In you css add background size property

.overlay {
background: url(../img/bocSlider.png) top left no-repeat;
position: absolute; 
background-position: center;
background-size: 100%;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
  }

You are adding class in wrong way and in bootstrap img-responsive applies to img tag,

<div class="overlay" class="img-responsive"></div>

Should be

<div class="overlay img-responsive"></div>

For your code remove img-responsive

<div class="overlay"></div>

Upvotes: 0

Anil Kumar Ram
Anil Kumar Ram

Reputation: 1221

You can use background color instead of overlay image. just write

background-color:rgba(0,0,0,.5);

Hope this will help you.

Upvotes: 1

Related Questions