CODEWITHSUNDEEP
cssresponsive-designtwitter-bootstrap-3
Nevin
Nevin

Reputation: 3298

Responsive issue on background image

This is My fiddle:

Its a simple issue and i am not getting why i cant have this background image responsive.. I am using the bootstrap class : "img-responsive" to make it responsive. After 1460px on width ,the image stops adapting to the width.

The image

id="background" class="img-responsive" lies within

The div

div id="innerWrapper"

This it the required css code:

#innerWrapper{
    border: 2px solid;
    float:none;
    position: relative;
    overflow:hidden;
    width:100%;
    display:block;
    height: auto;   
    background: no-repeat scroll 0 0;
    background-size: 100% 100%;
}

#background{
    max-width:100% !important;
    height:auto;
    display:block;
}

I was using http://designmodo.com/responsive-test/ for the responsive testing.

Upvotes: 0

Views: 248

Answers (1)

user2377141
user2377141

Reputation: 132

Your problem is that .img-responsive class defines the following CSS:

.img-responsive{
  display: block;
  max-width: 100%;
  height: auto;
}

And what this CSS means is:

Whatever my image size is, it will take all the space it has to fit its natural width (1279px) but, if it overflows its wrapper, it will fit to it.

If you want your image to always fit the size of its wrapper, you have to specify the following css:

#background{
  width: 100%;
}

But that's not enought, if you want your image to keep its aspect ratio, you also have to specify the height attribute:

#background{
   width: 100%;
   height: 100%;
}

Tell me if it worked.

Upvotes: 2

Related Questions