title: Text over image does not work when browser resized
body: <p><strong>Background</strong></p>
  
  <p>I needed some basic text over image for my website.I have done so by first giving a transparent black box using rgb and rgba functions.Then placed text over it by declaring image as "relative" and text as "absolute".</p>
  
  <p><strong>Problem</strong></p>
  
  <p>When I resize the browser,the text runs out of image in downward direction.
  It is shown in <a href="https://jsfiddle.net/Lheg26kw/" rel="nofollow">https://jsfiddle.net/Lheg26kw/</a>
  Here is html-</p>
  
  <pre><code>&lt;div class="hero-container"&gt;
  &lt;div class="hero-image"&gt;
  &lt;img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Old-Style_Balinese_Cat.png" width=100% height=80%&gt;
  &lt;div class="hero-text"&gt;
      &lt;p&gt;This is text&lt;br&gt;
      &lt;span&gt;this is some more text for trial of this problem&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is <strong>CSS</strong>:</p>
  
  <pre><code>.hero-image{
  position: relative;
  width: 100%;
  
  }
  .hero-text p{ 
   position: absolute;
   text-align: center;
   bottom: 0px;
   top: 0px;
   width: 100%;
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.4);
   padding-top: 80px;
   color: white;
    font-weight: bolder;
   }
  
  .hero-text span{
  font-weight: normal;
  }
  </code></pre>
  
  <p><strong>Need</strong></p>
  
  <p>I need the text to stay on image after resizing to minimum amount i.e. if website is accessed through a mobile.</p>