Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to place text on image using HTML and CSS?

  • Difficulty Level : Medium
  • Last Updated : 30 Jul, 2021

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




<!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
Recommended Articles
Page :

Start Your Coding Journey Now!