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

Today we are going to discuss this important topic via this article How to Place or Write Text on Image in Browser Using HTML5 and CSS3. We hope you like this article.

There are other types of multimedia to consider, but it’s logical to start with the simple element, which is used to embed a simple image on a webpage. In this article we will look at how to use it in-depth, the basics, annotating captions using
, and how it relates to CSS background images.

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

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>

Read Also: How to Turn an Image to a Clickable Hyperlink in Browser Using HTML5

Conclusion

How to Place or Write Text on Image in Browser Using HTML5 and CSS3 We learned about this very clearly through this article. And if you liked this article please share it with your friend.

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

Share on:

Leave a Comment