How To Create an Image with Transparent Text?

Last Updated : 24 May, 2024

In this article, we will learn how to create an image with a transparent (see-through) background text, using CSS.

Prerequisites

Approach

HTML Structure: The HTML structure consists of a <!DOCTYPE html> declaration followed by an HTML document containing an <div> element with a class of "box". Inside this <div>, there is an <h1> element containing the text "GeeksForGeeks".
CSS Styling:
- The CSS contains global styles such as setting the box-sizing to border-box, and defining the font family, size, margin, and padding for the body.
- The .box class is used to style the container <div>. It sets the height to cover the entire viewport and applies a background image with specified properties like cover and no-repeat.
- The h1 element is styled to e absolutely positioned in the center of its parent .box container using the top, left, and transform properties. The font-size is set to be responsive using viewport width units (vw). Text color, text shadow, and mix-blend-mode are also applied for visual effects.
- Media queries are used to adjust the font size of the heading for different screen sizes. Smaller font sizes are applied for screens with a maximum width of 768px and 480px, ensuring responsiveness.
The CSS utilizes media queries to ensure that the text size adapts to different screen sizes, providing a responsive design that looks good on various devices.
The background image is fetched from a URL provided in the CSS. It's set to cover the entire container and not repeat.
The text is styled with text shadow and mix-blend-mode to enhance its appearance and ensure readability against the background image. The use of text-transform: uppercase transforms the text to uppercase.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial;
            font-size: 17px;
            margin: 0;
            padding: 0;
        }

        .box {
            height: 100vh;
            background: 
url('https://media.geeksforgeeks.org/wp-content/uploads/20211103124244/wind-300x193.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
        }

        h1 {
            margin: 0;
            padding: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            font-size: 10vw;
            color: #fff;
            text-transform: uppercase;
            text-shadow: 0 5px 10px rgba(0, 0, 0, 1);
            mix-blend-mode: overlay;
        }

        @media screen and (max-width: 768px) {
            h1 {
                font-size: 8vw;
            }
        }

        @media screen and (max-width: 480px) {
            h1 {
                font-size: 6vw;
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>GeeksForGeeks</h1>
    </div>
</body>

</html>