How To Place Text on Image Using Html and Css

Posted By Bajarangi soft , Posted On 08-10-2020

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.

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

<!DOCTYPE html>
<html>
<head>
    <style>
        .gfg {
            margin: 3%;
            position: relative;
        }

        .first-txt {
            position: absolute;
            top: 17px;
            left: 50px;
            color:white;
            margin-left:220px;
        }

        .second-txt {
            position: absolute;
            bottom: 20px;
            left: 10px;
            color:white;
            margin-left:220px;

        }
        img{
            width:500px;
            height:500px;
            margin-left:220px;

        }
    </style>
</head>

<body>
<div class="gfg">
    <img src="b1.jpg">
    <h3 class="first-txt">Bajarangi Soft</h3>
    <h3 class="second-txt">A web design portal</h3>
</div>
</body>

</html>

Example-2

<!DOCTYPE html>
<html>

<head>
    <style>
        .gfg {
            margin: 3%;
            position: relative;
        }

        .first-txt {
            position: absolute;
            top: 17px;
            left: 20px;
            margin-left:300px;
            color:white;
        }

        .second-txt {
            position: absolute;
            top: 17px;
            left: 150px;
            margin-left:300px;
            color:white;
        }
        img{
            width:500px;
            height:500px;
            margin-left:220px;

        }
    </style>
</head>

<body>
<div class="gfg">
    <img src="b1.jpg">
    <h3 class="first-txt">Left</h3>
    <h3 class="second-txt">Right</h3>
</div>
</body>

</html>