Skip to content
Related Articles

Related Articles

How to place text on image using HTML and CSS?

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 30 Jul, 2021
Improve Article
Save Article

CSS position property is used to set the position of text over an image. This can be done by enclosing the image and text in an HTML “div”. Then make the position of div “relative” and that of text “absolute”. The absolute elements are positioned relative to their parent (div). The top, right, bottom, and left properties of these elements specify their location from the parent.

Example 1:




<!DOCTYPE html>
<html>
  
<head>
    <style>
        .gfg {
            margin: 3%;
            position: relative;
        }
  
        .first-txt {
            position: absolute;
            top: 17px;
            left: 50px;
        }
  
        .second-txt {
            position: absolute;
            bottom: 20px;
            left: 10px;
        }
    </style>
</head>
  
<body>
    <div class="gfg">
        <img src="gfg.png">
        <h3 class="first-txt">
            GeeksforGeeks
        </h3>
          
        <h3 class="second-txt">
            A computer science portal
        </h3>
    </div>
</body>
  
</html>

Output:

Example 2:




<!DOCTYPE html>
<html>
  
<head>
    <style>
        .gfg {
            margin: 3%;
            position: relative;
        }
  
        .first-txt {
            position: absolute;
            top: 17px;
            left: 20px;
        }
  
        .second-txt {
            position: absolute;
            top: 17px;
            left: 150px;
        }
    </style>
</head>
  
<body>
    <div class="gfg">
        <img src="gfg.png">
        <h3 class="first-txt">Left</h3>
        <h3 class="second-txt">Right</h3>
    </div>
</body>
  
</html>

Output:

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!