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

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.

HTML

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

How to create texture background using CSS ?

chaitanyashah707

Improve

Article Tags :

How to use Text as Background using CSS?

1. Using Absolute Positioning Inside a Relative Container

2. Using ::after Pseudo-Element

3. Using ::before Pseudo-Element

Similar Reads