**Background**

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".

**Problem**

When I resize the browser,the text runs out of image in downward direction.
It is shown in <https://jsfiddle.net/Lheg26kw/>
Here is html-

```
<div class="hero-container">
<div class="hero-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Old-Style_Balinese_Cat.png" width=100% height=80%>
<div class="hero-text">
    <p>This is text<br>
    <span>this is some more text for trial of this problem</span></p>
</div>
</div>
</div>

```

Here is **CSS**:

```
.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;
}

```

**Need**

I need the text to stay on image after resizing to minimum amount i.e. if website is accessed through a mobile.