How to place text in an image at any desired position ?

We encounter many situations in our day to day life where we want to write text over an image at the desired position. In this article, you are going to learn how to write text over an image using the positioning of the elements. Before going to the concept first we need to know about the position of the elements positioning generally means where you want your elements to appear on your website.

There are various options in positioning like static, relative, absolute, sticky etc. So here we will use the position property to place the text in an image.

Syntax:

position: static|absolute|fixed|relative|sticky|initial|inherit;

In this article you will learn about relative and absolute which are required to write text over an image

  • Relative positioning: This method is used to give the element position which is relative to the normal position.
  • Absolute positioning: In this method the elements are positioned with respect to their positioned ancestor (positioned implies the position of the ancestor is other than static) *as static is the default positioning.

Original Image:

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <style>
        .container {
            position: relative;
            text-align: center;
            color: green;
        }
          
        .bottom-left {
            position: absolute;
            bottom: 8px;
            left: 16px;
        }
          
        .top-left {
            position: absolute;
            top: 8px;
            left: 16px;
        }
          
        .top-right {
            position: absolute;
            top: 8px;
            right: 16px;
        }
          
        .bottom-right {
            position: absolute;
            bottom: 8px;
            right: 16px;
        }
          
        .centered {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
  
<body>
    <div class="container">
        <img src=
        <div class="bottom-left">Bottom Left</div>
        <div class="top-left">Top Left</div>
        <div class="top-right">Top Right</div>
        <div class="bottom-right">Bottom Right</div>
        <div class="centered">Centered</div>
    </div>
</body>
  
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.