Make division image responsive

Question

I am stuck in making images inside background of a class responsive.The website url .

It would be very helpful if you could help me out i am using bootstrap and nivo

Answer 1

Absolute positioned elements need to be put in a floated container to move responsively. The mobile content will move in sync with the screen shell if you put the absolute container into a floated one. I ran into this exact same problem on one of my projects - it's a surprisingly easy solution.

Pen: http://codepen.io/staypuftman/pen/tFhkz

Note the pink absolute positioned element moves as you resize the screen while staying inline with the blue box. The whole blue box with the pink absolutely positioned element inside will float together as unit to any width.

HTML:

  
  
    

      
Eaters: Find Your Favorite Food Truck
    
    

        

    
  

CSS (background colors are to show elements):

.hero-background {
background: #dedede;
height: 100%;
margin-top: 4em;
min-height: 20em;
min-width: 100%;
}

.hero-text-area-container {
background: #d6ffd1;
float: left;
margin: 0% 6%;
max-height: 25em;
padding-top: 11em;
position: relative;
vertical-align: middle;
width: 55%;
}

.hero-background .hero-text-area-container h3 {
background: #f7f7f2;
opacity: .8;
padding: 1em;
text-align: center;
}

.iphone-backdrop {
background: #d1e2ff;
float: left;
height: 120px;
max-width: 320px;
padding-top: 2em;
position: relative;
width: 100px;
}

.hero-image-band-container {
background: #ffd1d1;
height: 80px;
position: absolute;
width: 80px;
top: 13%;
left: 0;
bottom: 0;
right: 0;
}