How to Place Text Blocks Over an Image using CSS?

Last Updated : 30 Jul, 2024

Placing text blocks over an image is a common technique used in web design to create visually appealing layouts. Here, we will explore different approaches to achieve this effect using CSS.

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

Table of Content

Using Absolute Positioning
Using CSS background-image

Using Absolute Positioning

In this approach, we are using absolute positioning which allows us to place an element precisely where we want inside another element. We first make the container element position relative to serve as a reference point. Then we use position absolute on the text element and adjust its top, bottom, left, or right values to position it over the image.

Example: The example below uses the absolute positioning property to place text blocks on the image using CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px;
            height: 200px;
            position: relative;
        }

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

        .text {
            color: white;
            text-align: center;
            position: absolute;
            top: 2%;
            left: 2%;
            right: 2%;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px;
            z-index: 1;
        }
    </style>
</head>

<body>
    <div class="container">
        <img class="image"
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240513173522/GfgImage.png"
             alt="Image">
        <div class="text">
          Welcome to GeeksForGeeks!
          </div>
    </div>
</body>

</html>

Output:

ind

Using CSS background-image

In this approach, we are using CSS background-image to place text blocks over an image. Here we set the image as the background of a container element. The text block is then placed inside the container.

Example: The example below uses CSS background-image property to place text blocks over an image.