How to use text as background using CSS ?

22 Apr, 2020
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:
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:
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 :
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 :
CSS-Misc
HTML-Misc
Picked
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.