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 :
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
22 Apr, 2020
Like Article
Save Article