Open In App

How to use text as background using CSS ?

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

There are some website designs that require using text as the background. This can be easily achieved with CSS by using the following methods.

  • Using absolutely positioned element inside relatively positioned element: The absolutely positioned element inside a relative positioned element with absolute element having lower z-index value gives text appears as the background.

    Example:




    <!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:

  • Using :after pseudo elements: Using :after pseudo elements with :after pseudo elements having lower z-index value make it to appear as background. Use text inside :after pseudo element to make appear text as the background.

    Example:




    <!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:

  • Using :before pseudo elements: Using :before pseudo elements with :before pseudo elements having lower z-index value make it to appear as background. Use text inside :before pseudo element to make appear text as the background.

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Using text as background with CSS
        </title>
      
        <style>
            .bgtext {
                position: relative;
            }
      
            .bgtext:before {
                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 :



Last Updated : 22 Apr, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads