title: Responsive html with absolute position text inside relative positon picture
body: <p>What I'm trying to do, is an HTML page split in two colors and
  position a resizable image in the middle and on top show some positioned text.</p>
  
  <p>I've managed to do it, but the problem is that when I resize the window,
  image resizes just fine, but the text div loses its position.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    border-radius: 0;
    background: linear-gradient(to bottom, #f1b900 0%, #f1b900 50%, #000000 50%, #272660 50%, #272660 100%);
    /* W3C */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-shadow: -3px 0 6px #4a5562;
    -webkit-box-shadow: -3px 0 6px #4a5562;
    box-shadow: -3px 0 6px #4a5562;
    -moz-transition: all 300ms;
    -webkit-transition: all 300ms;
    width: 100%;
    transition: all 300ms;
    height: 100%;
  }
  .folderimg {
    box-sizing: border-box;
    background: url("folder.png") center center no-repeat;
    background-size: contain;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 75%;
    z-index: -1;
  }
  .foldername {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-55eg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
    font-size: 4vmin;
    position: absolute;
    margin-top: 5%;
    margin-left: 12%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main"&gt;
    &lt;div class="folderimg"&gt;
      &lt;div class="foldername"&gt;Test Username&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/apsillas/w1om0h0o" rel="nofollow">jsfiddle</a></p>
  
  <p>Some help would be really appreciable...</p>