How To Position Text Over an Image using CSS

In this example, we will learn how to position text over an image using CSS. We have already seen how to display text over an image. Here, we will be positioning the text at the top-left corner, top-right corner, bottom-right corner, bottom-left corner, and the center.

Prerequisites

• CSS position property
• CSS object-fit property
• CSS top property
• CSS left property
• CSS right property
• CSS bottom 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 class="bottom-left">Hello from bottom left</span>
    <span class="top-left">Hello from top left</span>
    <span class="top-right">Hello from top right</span>
    <span class="bottom-right">Hello from bottom right</span>
    <span class="centered">Hello from centered</span>

CSS

       .image-container {
            position: relative;
        }

        img {
            height: 100vh;
            width: 100%;
        }

        span{
            background-color: white;
            color: black;
        }

        .bottom-left {
            position: absolute;
            bottom: 0px;
            left: 0px;
        }

        .top-left {
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .top-right {
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .bottom-right {
            position: absolute;
            bottom: 0px;
            right: 0px;
        }

        .centered {
            position: absolute;
            top: 50%;
            left: 50%;
        }

Output

Here, we positioned the texts relative to the viewport using position: absolute and positioned the texts in every corner and the center using left, right, top, and bottom properties.

Conclusion

In this example, we learned how to position text over an image using CSS. We used the position property to position the text over an image and left, right, top, and bottom properties to position it in different corners and at the center.