title: scale and position text dynamically with screen size with css
body: <p>I want to place some text over a banner on my homepage. The banner changes it's size dynamically, when I scale it in Developer-Mode. Hower I can't mange to kepp the position of the text relative to the banner and change the font-size according to the scaling factor. I tried with font-size vh, vw, % etc.</p>
  
  <p>Here is the sample on jsfiddle:
  <a href="https://jsfiddle.net/malptek/2o3a81vp/2/" rel="nofollow">https://jsfiddle.net/malptek/2o3a81vp/2/</a></p>
  
  <p>My html-code:</p>
  
  <pre><code>&lt;div class="header-container clearfix"&gt;
      &lt;!-- &lt;div class="helper-box"&gt;&lt;/div&gt; --&gt;
      &lt;h1 class="header-post-title-banner header-subimage"&gt;This is a title&lt;/h1&gt;
      &lt;img src="http://mesut.alptekin.de/wp-content/uploads/tmpbanner.jpg" class="header-image"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And css:</p>
  
  <pre><code>.header-container {
  margin-bottom: 0;
  font-size: 16px;
  z-index: 1;
  /* border-bottom: 1px solid #EAEAEA; */
  position: relative;
  width: 100%;
  }
  
  .helper-box {
  z-index: 2; 
  position: absolute;
  margin-left: 8%;
  background-color: #ababab;
  margin-bottom: 0; 
  width: 260px; 
  height: 20%;
  }
  
  .header-subimage {     
  z-index: 2;
  font-size: 16px;
  position: absolute;
  margin-left: 8%;
  margin-bottom: 0;
  /*  background-color: #fff;
  opacity: .5;     */     
  width: 20%;     
  height: 20%; 
  /* width: 8em;     
  height: 1.67em; */ 
  }
  
  .header-image {
  z-index: 1;
  margin-bottom: 0;
  /* border-bottom: 1px solid #EAEAEA; */
  width: 100%;
  position: relative;
  }
  
  .header-post-title-banner {
  /* font-size: 3vh;
  font-size: 2vw; */
  font-size: 150%;
  text-align: center;
  color: #1b6dba;
  font-weight: bold;
  padding-bottom: 0;
  }
  
  @media screen and (min-width: 1285px) {
  .header-post-title-banner {
      font-size: 1.8em;
      text-align: center;
      color: #1b6dba;
      font-weight: bold;
      padding-bottom: 0;
   }
  }
  </code></pre>
  
  <p>==================================
  <strong>UPDATE:</strong></p>
  
  <p>well, this example is working because viewport is the same size as the banner. but you can imagine the banner being inside another big  with 1400px wide (see new example: jsfiddle.net/malptek/2o3a81vp/7). However, in this example the image is somehow not scaling according to the new  (don't know why).</p>