CSS/HTML : Putting up a text label on my image

Question

I want to put a small text label on the image. Can someone help me out with that ?

Putting the image in the div's background and writing on it is an option but as I am working on a dynamic project, I need to keep the css static

Here is what I have tried :

HTML:

<div class="image">
  <p class="text">Category</p>
</div>

CSS:

.image{
 height:40%;
 width:100%;
 text-align:center;
 padding-top:2px;
 background-image:url(Lighthouse.jpg);
 background-size:100% auto;
 }

Using this I have created something like this :

Now, as I am going to use Django, I don't want the image to be in css. I want to place it in my html file.

Answer 1

If you really need it in the HTML you can do something like this:

Working demo

HTML:

<div class="imgHolder">
    <img src="https://www.google.com/images/srpr/logo11w.png" />
    <span>Here's the overlay text</span>
</div>

CSS:

.imgHolder {
    position: relative;
}
.imgHolder span {
    position: absolute;
    right: 10px;
    top: 10px;
}

And of course change your <img src=""> to a variable from python.