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

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

Asked By: vhd
Originally Asked On: 2014-01-02 08:21:04
Asked Via: stackoverflow

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 : Image may be NSFW.
Clik here to view.

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.

He received 2 answers
eventually accepting:

Deryck’s answer to

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

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.

If the selected answer did not help you out, the other answers might!

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

Per Mattsson’s answer to

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

Have a look at PHP/GD.

http://www.php.net/manual/en/book.image.php

You can quite easily add content to an image using GD.

Deryck’s answer to

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

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.

Of course, you should really check out the original question.

The post CSS/HTML : Putting up a text label on my image [ANSWERED] appeared first on Tech ABC to XYZ.