“Responsive image over responsive image” - Twitter Bootstrap

Question

I'm trying to fix this:

I'm using the Twitter Bootstrap for responsive design. There is a large picture as a responsive background picture of the main content (positioned as a "relative") and there are several more pictures they are working as a navigator - their position is quite random (there is no grid or something like this):

HTML

<div class="container">
    <div class="row-fluid">     
        <div class="span12">
            <div id="LARGE_PICTURE">
                <img src="img/LARGE_PICTURE.png">
                <a href="#">
                    <img id="SMALL_PICTURE_1" src="SMALL_PICTURE_1.png">
                </a>
                <a href="#">
                    <img id="SMALL_PICTURE_2"src="SMALL_PICTURE_2.png">
                </a>
                <a href="#">
                    <img id="SMALL_PICTURE_3" src="SMALL_PICTURE_3.png">
                </a>
                <a href="#">
                    <img id="SMALL_PICTURE_4" src="SMALL_PICTURE_4.png">
                </a>
            </div>
        </div>           
    </div>
</div>

CSS

@import url('css/bootstrap.css');
@import url('css/bootstrap-responsive.css');
.container {
    background-image: url("img/bg.png");
}
#LARGE_PICTURE {
    position: relative;
}
#SMALL_PICTURE_1 {
    position:absolute;
    left:21%;
    top:24%;
}
#SMALL_PICTURE_2 {
    position:absolute;
    left:30%;
    top:13%;
}
#SMALL_PICTURE_3 {
    position:absolute;
    left:48%;
    top:26%;
}
#SMALL_PICTURE_4 {
    position:absolute;
    left:63%;
    top:16%;
}

The large picture works perfectly - it is responsive. But is there some simple way how to make smaller pictures responsive as well? Their size is changing according to screen resolution right now...Many thanks for some tips!

Answer 1

Position absolute + responsive = headache.

What you'll have to do is re-style all your #SMALL_PICTURE_X {} for each media queries.

Also, your html design is to fail since you are positioning images contained within an anchor but not working with the actual anchor tag.

To understand bootstrap grid system, you can go to v3 documentation , or v2 documentation .

I presume your situation is version 2 so you will have to do something like this:

/* Large desktop */
@media (min-width: 1200px) {
    #SMALL_PICTURE_1 {
        position:absolute;
        left:21%;
        top:24%;
        width:SET_A_WIDTH;
        height:SET_A_HEIGHT;
    }
    #SMALL_PICTURE_2 {
        position:absolute;
        left:30%;
        top:13%;
        width:SET_A_WIDTH;
        height:SET_A_HEIGHT;
    }
    #SMALL_PICTURE_3 {
        position:absolute;
        left:48%;
        top:26%;
        width:SET_A_WIDTH;
        height:SET_A_HEIGHT;
    }
    #SMALL_PICTURE_4 {
        position:absolute;
        left:63%;
        top:16%;
        width:SET_A_WIDTH;
        height:SET_A_HEIGHT;
    }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    #REPEAT_WHAT'S_BEEN_DONE_PREVIOUSLY {
    /* BY_POSITIONNING and SETTING_HEIGHT_AND_WIDTH */
    }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }