How to Place or Write Text on Image in Browser Using HTML5 and CSS3

In this article, I’m going to share the details about How to Place or Write Text on Image in Browser Using HTML5 and CSS3. Shall we start the article now? Let’s go.

How to Place or Write Text on Image in Browser Using HTML5 and CSS3

How to Place or Write Text on Image in Browser Using HTML5 and CSS3

In order to get started, you need to make an index.html file and copy-paste the following code

index.html

<!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>

Conclusion

I hope this article helps you to know about How to Place or Write Text on Image in Browser Using HTML5 and CSS3. If you have any doubts then feel free and let us know via the comment section. We will help you. Thank You!

Share on:

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Comment