How to use Absolute Positioning to place text on an image In HTML

Q: How to use Absolute Positioning to place text on an image In HTML

Absolute positioning places text on an image precisely using coordinates. Set the container’s position to relative and the text’s to absolute. Define top, bottom, left, or right properties to position the text relative to the container’s edges.

2. Using CSS background-image to place text on the image

Absolute positioning places text on an image precisely using coordinates. Set the container’s position to relative and the text’s to absolute. Define top, bottom, left, or right properties to position the text relative to the container’s edges.

Example: We have placed the text on the top of the image and given the text a background with some padding.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .gfg {
            position: relative;
            width: 100%;
            text-align: center;
        }


        .text-container {
            position: absolute;
            color: rgb(255, 255, 255);
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(41, 41, 41, 0.8);
            padding: 0.5rem;
            text-align: center;
            font-size: 16px;
        }
    </style>
</head>

<body>
  
    <div class="gfg">
        <img src=
"https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png"
            style="width: 50%; height: 60vh;">
        <div class="text-container">
            <h3>Sample</h3>
            <p>Mountains Image with river</p>
        </div>
    </div>
</body>

</html>

Output:

Using Absolute Positioning to place text on an image

Explanation

In this example, we create a centered container with an image and text overlaid on it.
CSS styles position the text container over the image using absolute positioning and center it horizontally and vertically.
The image takes up 50% of the container’s width and 60% of its viewport height.
Sample text “Sample” and a description “Mountains Image with river” are displayed within the text container.

How to place text on image using HTML and CSS?

Adding text over images is a very common task in web development and developers have been doing it for a long time. Instead of using image editing software, we can add text to an image using HTML and CSS.

Adding text to an image serves various benefits like providing better SEO, clarity, and emphasis on the image, and also provides a way for screen readers to read the text.

In this article, we will learn two methods to add a Text Block over an image using HTML and CSS. The two ways are:

Table of Content