How to Place or Write Text on Image in Browser Using HTML5 and CSS3 Full Project For Beginners


Welcome folks today in this blog post we will be placing or writing text on image in browser using html5 and css3.All the full source code of the application is given below.




Get Started




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






<!DOCTYPE html>

        .gfg {
            margin: 3%;
            position: relative;

        .first-txt {
            position: absolute;
            top: 17px;
            left: 50px;

        .second-txt {
            position: absolute;
            bottom: 20px;
            left: 10px;

    <div class="gfg">
        <img src="gfg.png">
        <h3 class="first-txt">
        <h3 class="second-txt">
            A computer science portal





In the above code we are using the special html5 form attribute called autocomplete to turn on/off autocomplete suggestions inside the form input fields

Leave a Reply