How to use Text as Background using CSS?

Last Updated : 15 Oct, 2024

Using text as a background in CSS means creating a visual effect where large text is placed behind content, often appearing as a decorative or watermark-like element. This effect can be achieved by positioning, opacity adjustments, and layering techniques with CSS.

Here we have some common methods to make Text as Background:

Table of Content

Using Absolute Positioning Inside a Relative Container
Using ::after Pseudo-Element
Using ::before Pseudo-Element

1. Using Absolute Positioning Inside a Relative Container

Using absolute positioning inside a relative container involves setting the parent container to position: relative and the child element to position: absolute. This allows the child to be precisely positioned within the container, enabling creative layout control and background effects.

Example: Here we CSS to position and rotate background text behind content. The .containerbackground element is rotated and placed behind the main text using absolute positioning.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Using text as background with CSS
    </title>

    <style>
        .container {
            position: relative;
        }

        .containerbackground {
            margin: 3rem;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: -1;
            transform: rotate(300deg);
            -webkit-transform: rotate(300deg);
            color: #c6afaf;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="containerbackground">
            Background Text
        </div>
        <p>Foreground text</p>
        <p>Welcome to GeeksforGeeks</p>
        <p>Start Learning</p>
    </div>
</body>

</html>

Output:

2. Using ::after Pseudo-Element

The ::after pseudo-element allows you to insert content after an element. By setting its content property and using position and z-index, you can create text or other elements that appear as a background behind the main content.

Example: Here the :after pseudo-element to display rotated background text behind content. The background text appears behind the paragraphs

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Using text as background with CSS
    </title>

    <style>
        .bgtext {
            position: relative;
        }

        .bgtext:after {
            margin: 3rem;
            content: "Background text";
            position: absolute;
            transform: rotate(300deg);
            -webkit-transform: rotate(300deg);
            color: rgb(187, 182, 182);
            top: 0;
            left: 0;
            z-index: -1;
        }
    </style>
</head>

<body>
    <div class="bgtext">
        <p>Foreground text</p>
        <p>Welcome to GeeksforGeeks</p>
        <p>Start Learning</p>
    </div>
</body>

</html>

Output:

3. Using ::before Pseudo-Element

The ::before pseudo-element inserts content before an element’s actual content. By setting the content property and using position and z-index, you can style this content to appear behind the main element, creating a background-like effect for design purposes.

Example: Here the :before pseudo-element to position and rotate background text behind the content. The background text appears rotated and styled using absolute positioning and a light color.