title: How to keep images fixed but also responsive so they don't overlap
body: <p>I trying to achieve like <a href="http://imgur.com/TIreHvH" rel="nofollow">this</a>.</p>
  
  <p>Problem is that this is responsive So individual images like iphone, logo , headphone stack below each other in smaller screen.</p>
  
  <p>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.</p>
  
  <p>Help will be appreciated. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;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;"&gt;
  &lt;div class="container-fluid"&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-4"&gt;
  
                  &lt;div id="iphone" class="col-xs-4"&gt;
                  &lt;/div&gt;
                  &lt;div id="camera" class="col-xs-4"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4"&gt;
  
                  nothing
                  &lt;/div&gt;
  
              &lt;div class="col-md-4"&gt;
  
                  &lt;div id="headphones" class="col-xs-4"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
  &lt;div class="col-md-4"&gt;
  
                  &lt;div id="notebook" class="col-xs-4"&gt;
                  &lt;/div&gt;
                  &lt;div id="glasses" class="col-xs-4"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4"&gt;
  
                  &lt;div id="logo" class="col-xs-4"&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="col-md-4"&gt;
  
                  &lt;div id="gopro" class="col-xs-4"&gt;
                  &lt;/div&gt;
                  &lt;div id="controller" class="col-xs-4"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-3"&gt;
              &lt;div id="cookie" class="col-xs-4"&gt;
                  &lt;/div&gt;
                  &lt;div id="tea" class="col-xs-4"&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
              &lt;div id="macbook" class="col-xs-4"&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3"&gt;
              &lt;div id="pen" class="col-xs-4"&gt;
                  &lt;/div&gt;
                  &lt;div id="harddisk" class="col-xs-4"&gt;
                  &lt;/div&gt;
                  &lt;div id="iwatch" class="col-xs-4"&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/********************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%;
  }
  </code></pre>