Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create an image with a transparent background text using CSS?

CSS Web Development Front End Technology

We can create an image with transparent background text by overlaying text content on an image using CSS positioning and background transparency. This technique uses a semi-transparent background color with the rgba() function to create an overlay effect that makes text readable while keeping the background image visible.

Syntax

.text-overlay {
    background: rgba(red, green, blue, alpha);
    position: absolute;
}

Method 1: Bottom Overlay Text

This approach positions the text overlay at the bottom of the image with a transparent background −

<!DOCTYPE html>
<html>
<head>
<style>
    .imageContainer {
        display: inline-block;
        position: relative;
        max-width: 100%;
    }
    
    .imageContainer img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    .imageContent {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 20px;
        text-align: center;
    }
    
    .imageContent h1 {
        margin: 0 0 10px 0;
        font-size: 2rem;
    }
    
    .imageContent h3 {
        margin: 0;
        font-weight: normal;
        font-size: 1.2rem;
    }
</style>
</head>
<body>
    <div class="imageContainer">
        <img src="/css/images/logo.png" alt="Sample Image">
        <div class="imageContent">
            <h1>Overlay Title</h1>
            <h3>This text has a transparent background overlay</h3>
        </div>
    </div>
</body>
</html>

An image appears with white text positioned at the bottom over a semi-transparent black background overlay. The text is clearly readable while the image remains visible through the transparent overlay.

Method 2: Centered Overlay Text

This method centers the text overlay in the middle of the image −

<!DOCTYPE html>
<html>
<head>
<style>
    .imageContainer {
        position: relative;
        display: inline-block;
        max-width: 100%;
    }
    
    .imageContainer img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        display: block;
    }
    
    .imageContent {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255, 255, 255, 0.8);
        color: #333;
        padding: 30px;
        border-radius: 10px;
        text-align: center;
        min-width: 200px;
    }
</style>
</head>
<body>
    <div class="imageContainer">
        <img src="/css/images/logo.png" alt="Sample Image">
        <div class="imageContent">
            <h2>Centered Overlay</h2>
            <p>Semi-transparent white background</p>
        </div>
    </div>
</body>
</html>

An image with dark text centered in the middle over a semi-transparent white background with rounded corners. The overlay creates a card-like effect over the image.

Key Properties

Property Purpose Example Value
position: relative Creates positioning context for container Applied to image container
position: absolute Positions text overlay within container Applied to text overlay
rgba() Creates transparent background color rgba(0, 0, 0, 0.6)
bottom: 0 Positions overlay at bottom For bottom alignment

Conclusion

Creating transparent background text over images requires CSS positioning and the rgba() function for transparency. The key is using position: relative on the container and position: absolute on the text overlay with a semi-transparent background.

Updated on: 2026-03-15T14:25:53+05:30

714 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements