Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use text as background using CSS?
Text as background creates interesting visual effects where text appears behind other content. This technique uses CSS positioning and z-index to layer text elements, making them appear as decorative background elements rather than primary content.
Syntax
/* Method 1: Absolute positioning */
.background-text {
position: absolute;
z-index: -1;
}
/* Method 2: Pseudo elements */
.element::before {
content: "Background Text";
position: absolute;
z-index: -1;
}
Method 1: Using Absolute Positioned Elements
This method positions text elements absolutely within a relatively positioned container, using negative z-index values to send them behind other content
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
height: 300px;
padding: 20px;
}
.foreground-content {
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.9);
padding: 15px;
border-radius: 8px;
}
.background-text {
position: absolute;
font-size: 60px;
font-weight: bold;
color: #e0e0e0;
z-index: -1;
transform: rotate(-15deg);
top: 50px;
left: 100px;
user-select: none;
}
</style>
</head>
<body>
<div class="container">
<div class="background-text">DESIGN</div>
<div class="foreground-content">
<h2>Creative Typography</h2>
<p>This content appears over the background text. The background text is positioned absolutely with a negative z-index to appear behind this content.</p>
</div>
</div>
</body>
</html>
A container with "DESIGN" as large, rotated, gray background text behind a white semi-transparent box containing the main content.
Method 2: Using Pseudo Elements
Pseudo elements (:before and :after) create background text without adding extra HTML markup
<!DOCTYPE html>
<html>
<head>
<style>
.text-bg-container {
position: relative;
padding: 40px 20px;
text-align: center;
}
.text-bg-container::before {
content: "BACKGROUND";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-10deg);
font-size: 48px;
font-weight: bold;
color: #f0f0f0;
z-index: -1;
user-select: none;
}
.main-text {
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.95);
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="text-bg-container">
<div class="main-text">
<h2>Pseudo Element Background</h2>
<p>This technique uses ::before pseudo element to create background text without additional HTML markup.</p>
</div>
</div>
</body>
</html>
A centered content box with "BACKGROUND" as large, rotated, light gray text appearing behind the main content area.
Key Properties
| Property | Purpose |
|---|---|
position: absolute |
Positions background text precisely |
z-index: -1 |
Sends text behind other content |
opacity |
Controls text transparency |
transform |
Rotates or scales background text |
user-select: none |
Prevents text selection |
Conclusion
Text backgrounds add visual depth using absolute positioning or pseudo elements with negative z-index values. Pseudo elements are preferred as they keep HTML clean while absolute positioning offers more control over multiple background text elements.
2K+ Views
