How to use text as background using CSS ?

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output :

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.