Open In App

How to place text on image using HTML and CSS?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:

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:

text over image using html and css

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:

add text overlay on image using css

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,



Last Updated : 14 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads