Placing text within an image

2

I have the following image and text TEST , I would like to position the word TEST where X is in the image.

<img src="../Content/Images/top.png">
<label>TESTE</label>        

What is the best way to do this?

    
asked by anonymous 30.12.2015 / 12:09

3 answers

6

You should first place both elements of a div or figure with position: relative and display: inline-block; , so you can put a position: absolute; in label or figcaption and position it with properties top , right , bottom and / or left .

#container {
  display: inline-block;
  position: relative;
}

#container figcaption {
  position: absolute;
  top: 145px;
  right: 20px;
  font-size: 40px;
  color: black;
  text-shadow: 0px 0px 5px black;
}
<figure id="container">
  <img src="http://cdn.flaticon.com/png/256/63523.png" />  
  <figcaption>Teste</figcaption>
</figure>

In the example below, I have the image of a gift card and want to get the label inside the taja of it.

    
30.12.2015 / 12:47
5

Using img and label is possible in this way.

.container {
  position: relative;
}

#image {
  position: absolute;
}

#texto {
  position: absolute;
  font-size: 32px;
  left: 250px;
  top: 135px;
}
<div class="container">
  <img id="image" src="https://i.stack.imgur.com/yVoVU.png"><labelid="texto">TESTE</label>
</div>
    
30.12.2015 / 12:56
1

Try to use figurecaption to group the image and the label, after which you will have to move to CSS. There you place the figurecaption with relative position and the label with absolute position

    
30.12.2015 / 12:42