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

Using Absolute Positioning to place text on an image
Using CSS background-image to place text on the image

1. Using Absolute Positioning to place text on an 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.geeksforgeeks.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.

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

Use CSS background-image property to set an image as background within a container. Adjust background size using background-size property to cover the entire container. Overlay text elements on the background for a visually appealing design.

Example: In this example, we are using CSS background-image property to place text on the image.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        
    </title>
    <style>
        .container {
            position: relative;
            width: 400px;
            height: 300px;
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png");
            background-size: cover;
            background-size: 100% 100%;
            color: white;
            text-align: center;
            line-height: 300px;

        }

        .text {
            background-color: rgba(0, 0, 0, 0.5);
            font-size: 20px;
            font-weight: bold;
            padding: 10px;
        }
    </style>
</head>

<body>
    <center>
        <div class="container">
            <div class="text">Text on Image : (GeeksforGeeks)</div>
        </div>
    
    </center>
</body>

</html>

Output:

Using CSS background-image Property

Explanation:

The above example overlays text on an image using the background-image property.
Container div styled with specific dimensions and background image URL.
Text positioned inside div with semi-transparent background for visibility.
Overall effect achieved through precise styling and positioning.

Conclusion:

Adding text over an image is widely used in web development. We can see this being used in customer testimonial sections. We also add text on images to create more interactive elements, add watermarks, or establish copyright ownership.

This article teaches two easy ways to overlay text on image. Use the power of HTML and CSS to create interactive images,

Article Tags :

CSS

HTML

Web Technologies

CSS-Misc

HTML-Misc