How to Place Text Over an Image using CSS?

Last Updated : 05 Sep, 2024

Place Text Over an Image means overlaying text on top of an image using HTML and CSS. This effect is commonly achieved by placing the image and text inside a container and then using CSS techniques like absolute positioning, z-index, or flexbox to position the text over the image.

Below are the approaches to placing text over an image using CSS:

Table of Content

Using absolute position
Using z-index Property

Using absolute position

In this approach, we are using the absolute position property. Here we create a container and set the container position to relative, this makes the container the reference point for the positioned text. Then we use position: absolute; on the text element, this allows us to place the text precisely within the container using top, bottom, left, and right properties.

Example: In this example, we are using the absolute position property to place text over an image using CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Using absolute position</title>
    <style>
        .container {
            position: relative;
            width: 400px;
            height: 300px;
        }

        .image {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }

        .text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>

<body>
    <div class="container">
        <img class="image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240330112115/gfg-gg-logo-100.jpg"
            alt="Image">
        <div class="text">GeeksForGeeks</div>
    </div>
</body>

</html>

Output:

absp — Text over an image using the absolute position property

Using z-index Property

This approach uses the CSS z-index property to overlay text on an image. By setting the image’s z-index lower and the text’s z-index higher within a positioned container, the text is layered above the image, making it visible on top.

Example: In this example, text is overlaid on an image using z-index for layering. The image has a lower z-index, while the text appears above it due to a higher z-index.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Over Image Using z-index</title>
    <style>
        .container {
            position: relative;
            width: 300px;
        }

        .container img {
            width: 100%;
            position: relative;
            z-index: 1;
            /* Image z-index */
        }

        .text-overlay {
            position: absolute;
            top: 20px;
            left: 20px;
            color: rgb(24, 23, 23);
            z-index: 2;
            /* Text z-index, higher than the image */
            font-size: 40px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="container">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240330112115/gfg-gg-logo-100.jpg" 
             alt="Sample Image">
        <div class="text-overlay" >GeeksforGeeks</div>
    </div>
</body>

</html>