title: CSS position div over background image responsive
body: <p>I need to have a image on div background. Over this image, its mandatory to have one title, subtitle and a button. </p>
  
  <p>All these three elements need to have top and left in % for dynamic position.</p>
  
  <p>I had made several tries, but without success.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="block1"&gt;
          &lt;div id="title"&gt;LIAM&lt;/div&gt;
          &lt;div id="subtitle"&gt;SUPER SLIM FIT&lt;/div&gt;
          &lt;div id="link"&gt;
              &lt;a href="#"&gt; See all jeans&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>  #block1 {
      background-image: url('http://tiffosi.com/fw16/img/img1.jpg');
      background-repeat: no-repeat;
      background-size: contain;
      width: 100%;
      height: 1450px;
      max-width: 1086px;
      max-height: 1450px;
      position: relative;
      top: 0;
      left: 0;
  }
  
  #block1 #subtitle {
      font-size: 16pt;
      color: white;
      position: absolute;
      top: 23.4%;
      left: 43.5%;
      letter-spacing: 1px;
  }
  
  #block1 #link {
      width: 184px;
      text-align: center;
      height: 43px;
      line-height: 43px;
      border: 1px solid white;
      font-size: 11pt;
      top: 29.3%;
      left: 41.3%;
      position: absolute;
  }
  
  #block1 #link a {
      color: white;
      text-decoration: none;
      font-weight: 100;
  }
  
  @media only screen and (min-width : 768px) {
      #block1 #title{
          top: 12%;
          left:42%;
          font-size:80%;
      }
  }
  
  @media only screen and (min-width : 992px) {
      #block1 #title {
          font-size: 100%;
          position: absolute;
          top: 16.5%;
          left: 42%;
          letter-spacing: 2px;
      }
  }
  
  #block1 #title {
      font-size: 97px;
      color: white;
      position: absolute;
      top: 16.5%;
      left: 42%;
      letter-spacing: 2px;
  }
  </code></pre>
  
  <p>Link to jsffidle: <a href="https://jsfiddle.net/jggscada/" rel="nofollow">https://jsfiddle.net/jggscada/</a></p>