How to put text on an image using HTML and CSS?

Views: 56
Comments: 0
Like/Unlike: 0
Posted On: 23-Jan-2023 23:08 

Share:   fb twitter linkedin
Pratibha
Teacher
20 Points
2 Posts

We are going to achieve above result by using html and css.

CSS position property is used to set the position of text over an image. This can be  acheived by putting img tag and div 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.

<!DOCTYPE html>
<html>
<head>
    <style>
        .gfg {
            margin: 3%;
            position: relative;
        }
        .first-txt {
            position: absolute;
            top: -15px;
            left: 200px;
            color: white;
        }
        .second-txt {
            position: absolute;
            bottom: -10px;
            left: 200px;
          color: red;
        }
    </style>
</head>
<body>
    <div class="gfg">
        <img style="width:600px" src="https://www.niceonecode.com/uploads/296/nature_environment_01.jpg">
        <h3 class="first-txt">
            Put me top on an image
        </h3>        
        <h3 class="second-txt">
            Put me bottom on an image
        </h3>
    </div>
</body>
</html>
0 Comments
 Log In to Chat