How to Create Text field in multiple positions over image

You might face situations when you need to put some text on image, especially, when you want to add description to an image or label some part of it. You may perform this task effectively by using CSS tricks. This tutorial is to help you understand these tricks and methods on how to add Text Field in multiple positions- frankly speaking in any positions- on an image.

Our previous tutorial showed how to position an image anywhere within a container. Basically, this is the same case. Here a Container div will contain an image. We’ll position another text-div in different points of the container-div which is actually similar to positioning text in different points of the image.

Let’s start our tour:

Tricks to create text field in any position on image

Basically the CSS property we’re going to use to serve this purpose is position:absolute.

To make position:absolute work to put text on image, do the followings sequentially:

• Take a container div. Style it with position:relative. You can also set other properties like border, text-align, color etc.
• Take an img element with src, alt and width attribute inside the div.

CODE

<div style="position:relative;
text-align: center;
color:#cc00ff;">
 
<img src="https://www.netplanter.com/wp-content/uploads/2020/02/LOTUS-2.jpg" 
 alt="Lotus Flower" 
style= "width:70%;height:250px;">
</div>

OUTPUT

Image is ready. Now we’ll put text on it. For this-

• Take another div under the container div just after img element.
• Style this div with position:absolute.
• To fix the position, set Top, Bottom, Left and Right property.
• The rule is: set any one property from Top and Bottom and set any one property from Left and Right.
• Set their values as you wish your text to appear on image.
• Put some displayable text for the div.

Let’s move on to the next step to put our plan in action:

Setting text in different positions over image

Near Top-right

CODE

<div style="position:relative;
text-align: center;
color:#cc00ff;">
 
<img src="https://www.netplanter.com/wp-content/uploads/2020/02/LOTUS-2.jpg" 
 alt="Lotus Flower" 
style= "width:70%;height:250px;">

<div style="
position:absolute; 
top: 30px; 
right:20px;"> Top-right Text</div>

</div>

OUTPUT

Top-right Text

Near Bottom-left

CODE

<div style="position:relative;
text-align: center;
color:#cc00ff;">
 
<img src="https://www.netplanter.com/wp-content/uploads/2020/02/LOTUS-2.jpg" 
 alt="Lotus Flower" 
style= "width:100%;height:250px;">

<div style="
position:absolute; 
bottom:30px; 
left:30px;"> Bottom-left Text</div>

</div>

OUTPUT

Bottom-left Text

Near Top-left

CODE

<div style="position:relative;
text-align: center;
color:gold;">
 <img src="https://www.netplanter.com/wp-content/uploads/2020/02/LOTUS-2.jpg" 
 alt="Lotus Flower" 
style= "width:100%;height:250px;">
<div style="
position:absolute; 
top:5px; 
left:15px;">Text<br>Top-left Text </div>
</div>

OUTPUT

Top-left Text

Vertically centered

CODE

<div style="position:relative;
text-align: center;
color:gold;">
 <img src="https://www.netplanter.com/wp-content/uploads/2020/02/LOTUS-2.jpg" 
 alt="Lotus Flower" 
style= "width:100%;height:250px;">
<div style="
position:absolute; 
top:115px; 
left: 0;">Vertically-centered Text</div>
</div>

OUTPUT

Vertically-centered Text

Horizontally and Vertically centered

CODE

<div style="position:relative;
text-align: center;
color:gold;">
 <img src="https://www.netplanter.com/wp-content/uploads/2020/02/LOTUS-2.jpg" 
 alt="Lotus Flower" 
style= "width:100%;height:250px;">
<div style="
position:absolute; 
top:50%; 
left: 50%;
transform: translate(-50%, -50%);"> 
Horizontally and <br>Vertically-centered <br>Text</div>
</div>

OUTPUT

Horizontally and
Vertically-centered
Text

By following these rules and tricks, you can position text in any point of an image.

Didn’t you enjoy this tutorial!