How to keep images fixed but also responsive so they don't overlap


Tags: html,css,twitter-bootstrap

Problem :

I trying to achieve like this.

Problem is that this is responsive So individual images like iphone, logo , headphone stack below each other in smaller screen.

I want there positions of be fixed in container. I don't want images to stacked below each other. How to position images like this using bootstrap? I want website to be responsive but also position of images remain exact.

Help will be appreciated.

HTML:

<div class="jumbotron" style="background-image: url('background.png'); width: 100%; height: 100%;position: absolute; top: 0; left: 0; overflow: hidden; background-size: cover;
background-repeat: no-repeat;">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">

                <div id="iphone" class="col-xs-4">
                </div>
                <div id="camera" class="col-xs-4">
                </div>
            </div>
            <div class="col-md-4">

                nothing
                </div>

            <div class="col-md-4">

                <div id="headphones" class="col-xs-4">
                </div>
            </div>
    </div>

    <div class="row">
<div class="col-md-4">

                <div id="notebook" class="col-xs-4">
                </div>
                <div id="glasses" class="col-xs-4">
                </div>
            </div>
            <div class="col-md-4">

                <div id="logo" class="col-xs-4">
                </div>
                </div>

            <div class="col-md-4">

                <div id="gopro" class="col-xs-4">
                </div>
                <div id="controller" class="col-xs-4">
                </div>
            </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div id="cookie" class="col-xs-4">
                </div>
                <div id="tea" class="col-xs-4">
                </div>
        </div>
        <div class="col-md-6">
            <div id="macbook" class="col-xs-4">
                </div>
        </div>
        <div class="col-md-3">
            <div id="pen" class="col-xs-4">
                </div>
                <div id="harddisk" class="col-xs-4">
                </div>
                <div id="iwatch" class="col-xs-4">
                </div>
        </div>
        </div>
    </div>  
</div>

CSS:

/********************iphone*******************************/
#iphone
{
    position: relative;
    top:-110px;
    left:-140px; 
    background-image: url('../images/New Folder/iPhone.-3.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index:100;
    height: auto;
    max-width:100%;
    display:block;
    float: left;
    width: 200px;
    height: 196px;
    padding-top: 102.04%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}
@media only screen and (max-width: 767px) {
    #iphone { height: auto;
    max-width:50%; }
}
@media only screen and (min-width: 768px) {
    #iphone {height: auto;
    max-width:60%; }
}
@media only screen and (min-width: 1280px) {
    #iphone { height: auto;
    max-width:100%; }
}
/********************headphones***************************/
#headphones
{
    position: relative;
    float: right;
    top:-30px;
    right:-130px; 
    background-image: url('../images/New Folder/headphones-2.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index:100;
    height: auto;
    max-width:100%;
    display:block;
    width: 400px;
    height: 450px;
    padding-top: 102.04%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}
@media only screen and (max-width: 767px) {
    #headphones { height: auto;
    max-width:50%; }
}
@media only screen and (min-width: 768px) {
    #headphones {height: auto;
    max-width:60%; }
}
@media only screen and (min-width: 1280px) {
    #headphones { height: auto;
    max-width:100%; }
}
/******************camera***********************/
#camera
{
    position: relative;

    top:110px;
    left:-300px;
    background-image: url('../images/New Folder/camera-2.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index:100;
    height: auto;
    max-width:100%;
    display:block;
    width: 160px;
    height: 182px;
    padding-top: 102.04%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}
@media only screen and (max-width: 767px) {
    #camera { height: auto;
    max-width:50%; }
}
@media only screen and (min-width: 768px) {
    #camera {height: auto;
    max-width:60%; }
}
@media only screen and (min-width: 1280px) {
    #camera { height: auto;
    max-width:100%; }
}
/***********notebook*******************/
#notebook
{
    position: relative;

    top:-190px;
    left:-130px; 
    background-image: url('../images/New Folder/moleskine-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index:100;
    height: auto;
    max-width:100%;
    display:block;
    width: 300px;
    height: 275px;
    padding-top: 109.47%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}
@media only screen and (max-width: 767px) {
    #notebook { height: auto;
    max-width:50%; }
}
@media only screen and (min-width: 768px) {
    #notebook {height: auto;
    max-width:60%; }
}
@media only screen and (min-width: 1280px) {
    #notebook { height: auto;
    max-width:100%; }
}
/****************glasses******************/
#glasses
{
    position: absolute;

    top:-110px;
    left:0px; 
    background-image: url('../images/New Folder/glasses-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index:100;
    height: auto;
    max-width:100%;
    display:block;
    width: 250px;
    height: 156px;
    padding-top: 192.36%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
    z-index: 1000;
}
@media only screen and (max-width: 767px) {
    #glasses { height: auto;
    max-width:50%; }
}
@media only screen and (min-width: 768px) {
    #glasses {height: auto;
    max-width:60%; }
}
@media only screen and (min-width: 1280px) {
    #glasses { height: auto;
    max-width:100%; }
}
/**************logo************************/
#logo
{
    position: relative;

    top:-300px;
    left:0px; 
    background-image: url('../images/New Folder/logo-transparent.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index:100;
    height: auto;
    max-width:200%;
    display:block;
    width: 3800px;
    height: 1800px;
    padding-top: 225.07%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
    z-index: 1000;
}
@media only screen and (max-width: 767px) {
    #logo { height: auto;
    max-width:50%; }
}
@media only screen and (min-width: 768px) {
    #logo {height: auto;
    max-width:60%; }
}
@media only screen and (min-width: 1280px) {
    #logo { height: auto;
    max-width:100%; }
}
/******************gopro*****************/
#gopro
{
    position: relative;

    top:-100px;
    left:0px;  
    background-image: url('../images/New Folder/GoPro-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index:100;
    height: auto;
    max-width:100%;
    display:block;
    width: 120px;
    height: 121px;
    float: right;
    padding-top: 95.02%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
    z-index: 1000;
}
@media only screen and (max-width: 767px) {
    #gopro { height: auto;
    max-width:50%; }
}
@media only screen and (min-width: 768px) {
    #gopro {height: auto;
    max-width:60%; }
}
@media only screen and (min-width: 1280px) {
    #gopro { height: auto;
    max-width:100%; }
}
/********************controller****************/
#controller
{
    position: relative;

    top:-100px;
    left:240px; 
    background-image: url('../images/New Folder/console-2.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index:100;
    height: auto;
    max-width:100%;
    display:block;
    width: 50px;
    height: 95px;
    padding-top: 68.9%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
    z-index: 1000;
    float: left;
}
@media only screen and (max-width: 767px) {
    #controller { height: auto;
    max-width:50%; }
}
@media only screen and (min-width: 768px) {
    #controller {height: auto;
    max-width:60%; }
}
@media only screen and (min-width: 1280px) {
    #controller { height: auto;
    max-width:100%; }
}
/**************tea****************/
#tea
{
    position: absolute;

    top:-870px;
    left:100px; 
    background-image: url('../images/New Folder/tea-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index:100;
    height: auto;
    max-width:100%;
    display:block;
    width: 180px;
    height: 160px;
    padding-top: 95.9%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
    z-index: 1000;
    float: right;
}
@media only screen and (max-width: 767px) {
    #tea { height: auto;
    max-width:50%; }
}
@media only screen and (min-width: 768px) {
    #tea {height: auto;
    max-width:60%; }
}
@media only screen and (min-width: 1280px) {
    #tea { height: auto;
    max-width:100%; }
}
/****************cookie****************/
#cookie
{
    position: absolute;

    top:-870px;
    left:0px;  
    background-image: url('../images/New Folder/cookies-2.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index:100;
    height: auto;
    max-width:100%;
    display:block;
    width: 90px;
    height: 82px;
    padding-top: 95.9%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
    z-index: 1000;
}
@media only screen and (max-width: 767px) {
    #cookie { height: auto;
    max-width:50%; }
}
@media only screen and (min-width: 768px) {
    #cookie {height: auto;
    max-width:60%; }
}
@media only screen and (min-width: 1280px) {
    #cookie { height: auto;
    max-width:100%; }
}
/****************macbook****************/
#macbook
{
    position: relative;

    top:-1000px;
    left:0px; 
    background-image: url('../images/New Folder/MacBook-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index:100;
    height: auto;
    max-width:100%;
    display:block;
    width: 550px;
    height: 447px;
    padding-top: 123.04%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
    z-index: 1000;
}
@media only screen and (max-width: 767px) {
    #macbook { height: auto;
    max-width:50%; }
}
@media only screen and (min-width: 768px) {
    #macbook {height: auto;
    max-width:60%; }
}
@media only screen and (min-width: 1280px) {
    #macbook { height: auto;
    max-width:100%; }
}
/**************************harddisk*****************/
#harddisk
{
    position: absolute;

   top:-1000px;
    left:250px; 
    background-image: url('../images/New Folder/hard-disk-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index:100;
    height: auto;
    max-width:100%;
    display:block;
    width: 300px;
    height: 325px;
    padding-top: 92.302%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
    z-index: 1000;
    float: right;
}
@media only screen and (max-width: 767px) {
    #harddisk { height: auto;
    max-width:50%; }
}
@media only screen and (min-width: 768px) {
    #harddisk {height: auto;
    max-width:60%; }
}
@media only screen and (min-width: 1280px) {
    #harddisk { height: auto;
    max-width:100%; }
}
/********************iwatch*****************************/
#iwatch
{
    position: absolute;

    top:-900px;
    left:0px;
    background-image: url('../images/New Folder/iWatch-4.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index:100;
    height: auto;
    max-width:100%;
    display:block;
    width: 300px;
    height: 213px;
    padding-top: 127.79%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
    z-index: 1000;
    float:left;
}
@media only screen and (max-width: 767px) {
    #iwatch { height: auto;
    max-width:50%; }
}
@media only screen and (min-width: 768px) {
    #iwatch {height: auto;
    max-width:60%; }
}
@media only screen and (min-width: 1280px) {
    #iwatch { height: auto;
    max-width:100%; }
}
/****************pen*******************/
#pen
{
    position: absolute;

    top:-870px;
    left:-50px;  
    background-image: url('../images/New Folder/handle.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index:100;
    height: auto;
    max-width:100%;
    display:block;
    width: 150px;
    height: 177px;
    padding-top: 84.79%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
    z-index: 1000;
}
@media only screen and (max-width: 767px) {
    #pen { height: auto;
    max-width:50%; }
}
@media only screen and (min-width: 768px) {
    #pen {height: auto;
    max-width:60%; }
}
@media only screen and (min-width: 1280px) {
    #pen { height: auto;
    max-width:100%; }
}
.row
{

    height: 33%;
}


Solution :

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

To center images which use the .img-responsive class, use .center-block instead of .text-center.

An alternate solution can be found here

Demo of the alternate solution (jFiddle)


    CSS Howto..

    how to give dynamic height in css

    How to emulate window title bar in CSS/HTML

    How to bind Menus and submenus apply css using Jquery?

    In CSS how to achieve, two cells with auto width in fixed width parent, with priority to see content in second cell and with ellipsis at first cell?

    How to select an element that has id starting with a digit (css)?

    How to apply SVG filter to an element?

    How do I access separate points/sections on a single image in html/javascript?

    how to set menu to activate always hover effect on [closed]

    How to disable scrollbars in Webmethods 8?

    How to change the color of a textfield dynamically in sencha?

    How do I get this ul li dropdown menu to show on hover with jquery or javascript?

    how to make those two divs in one line

    How to insert / edit / group css rules faster?

    How is CSS/HTML Rendered In Browsers?

    How do i add a cookie to my popup form? Built only with css and html [closed]

    How to preload predefined images in Java-Script / jQuery?

    How do I make circles within a larger circle, and text within the center of all the circles, in CSS?

    how to change browsers default scrollbar using css or jquery

    How to change button CSS attributes

    How to make this loading overlay effect responsive?

    How can i remove all attributes from any css selector? To override and reset any css id selectors?

    How to create a border gap illusion

    How to determine the 'toggle' status of a CSS toggle input?

    How to auto-adjust size of other input fields while typing into input field #1?

    How to stop image shrinking when page is resized horizontally in CSS

    How to modify the font family within bootstrap

    How to implement CSS multi-level drop down menu with different classes?

    In javascript, jQuery, or css how do I get a div or iframe to expand to fill rest of space

    How to use CSS to style 4 blocks of Info in the homepage?

    How to accomplish onHover event without a second image