How to Display Text Over an Image using CSS

In this example, we will learn how to display text over an image using CSS. We will be using the position property and some other CSS properties in this example.

Prerequisites

• CSS position property
• CSS object-fit property

Example

HTML

<div class="image-container">
    <img src="<https://thumbs.dreamstime.com/b/cosmos-beauty-deep-space-elements-image-furnished-nasa-science-fiction-art-102581846.jpg>" />
</div>
<span>Hello this is text </span>

CSS

        .image-container {
            position: relative;
        }

        img {
            max-width: 100%;
            object-fit: cover;
        }

        span{
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 24px;
            color: black;
            background-color: white;
        }

Output

Here, we set the position of the image-container to relative and the position of the text to absolute so that the text can be positioned relative to the image-container. The image is set to object-fit: cover so that it covers the page and the text is displayed at the center of the page using top and left properties.

Conclusion

In this example, we learned how to display text over an image using CSS. We used the position property and some other CSS to display the text over an image aligned at the center.