title: Overlay text over centered image?
body: <p>I want to overlay text over a centered image. The following approach feels very hacky but works when the window has fixed size:</p>
  
  <pre><code>$Illustrationwidth: 509px;
  
  .Illustration {
    position: relative;
    text-align: center;
    margin-top: 60px;
  
    &amp;_tricky {
      position: absolute;
      text-align: left;
      top: 24px;
      left: 290px;
      width: 300px;
    }
  
    &amp;_answered {
      position: absolute;
      text-align: left;
      top: 73px;
      left: 290px;
      width: 300px;
    }
  
    &amp;_attention {
      position: absolute;
      text-align: left;
      top: -30px;
      left: 96px;
    }
  }
  </code></pre>
  
  <p>Here is the HTML I am using:</p>
  
  <pre><code>&lt;div class="IntroIllustration"&gt;
      &lt;img src="images/illustration.png"/&gt;
  
      &lt;h2 class="Illustration_attention"&gt;header above the image&lt;/h2&gt;
      &lt;div class="Illustration_tricky"&gt;an overlayed text&lt;/div&gt;
      &lt;div class="Illustration_answered"&gt;another overlayed text&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, it does not work if the user changes the width of the window.</p>
  
  <p>How can I make this work even when the window can change width? The solution needs to work for IE 10+ and for the latest two versions of Chrome.</p>
  
  <p>Also, please educate me and help me become better at CSS :-)</p>