Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use text as background using CSS?
In general, we use text in foreground not as background because text is the most important thing for any website and organizing text on frontend with good visibility, readability and fonts to show the users is also important. But sometimes, you need to show the text as background for other text or HTML element with some content. In that case you can use the z-index property of CSS with different properties to show text as background. There are two different ways of using the z-index property with other properties and selectors to show text as background using CSS as listed below −
Use it with an absolute positioned element whose parent is relatively positioned.
Use it with :before or :after pseudo selector or elements.
Now, as we have seen the methods with which we can use the z-index property. Let us now understand them individually in details with help of code examples.
Using it with absolute positioned element
An absolute positioned element can be positioned inside its parent element or ancestor which has the position property value as relative. If absolute positioned element does not have any ancestor then it will consider body element as ancestor and position according to it. These elements can even overlap.
Syntax
The below syntax will show how to use text as background with the help of an absolutely positioned element −
.parentElement {
Position: relative;
}
childElement {
position: absolute;
}
Now, let us understand the practical implementation of this method in details with the help of code example.
Steps
Step 1 − In the first step, we will define a container element with a class that contains all the foreground and background text elements in it.
Step 2 − In the next step, we will define some HTML elements with the text that will be shown in the foreground and background with the different classes associated with them to provide different CSS.
Step 3 − In the final step, we will apply the CSS on the elements whose text we have to show as background by using the position: absolute property with them.
Example
The below example will illustrate the above algorithm and how to use the absolutely positioned element to show text as background −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.bg_text {
position: absolute;
top: 50%;
z-index: -1;
opacity: 0.3;
color: grey;
transform: rotate(320deg);
}
.bg_text-1 {
left: 10%;
}
.bg_text-2 {
left: 50%;
}
.bg_text-3 {
left: 90%;
}
</style>
</head>
<body>
<center>
<div class = "container">
<h2>Use text as background using CSS</h2>
<p>The <b> absolutely positioned </b> element is used to show the text as background of this text.</p>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p>
<p class = "bg_text bg_text-1">Tutorialspoint </p>
<p class = "bg_text bg_text-2">Tutorialspoint </p>
<p class = "bg_text bg_text-3">Tutorialspoint </p>
</div>
</center>
</body>
</html>
In this example, we have used the z-index property with the absolutely positioned element to show the the text contained by it as the background text along with other CSS properties.
By using the :before or :after pseudo elements
The :before and :after pseudo elements are the type of elements that allow us to add any kind of content before an existing element without being adding a extra markup or element in the HTML.
Syntax
The syntax below will show how to use the :before and :after pseudo elements to show the text as background −
.htmlElement1:before {
content: any text you want to display as background text
}
.htmlElement2:after {
content: any text you want to display as background text
}
Let us now understand the practical implementation of this method with the help of code example.
Steps
Step 1 − In the first step, we will define a container element which will contain all the elements and a position: relative CSS property.
Step 2 − In the next step, we will define two different elements with two different classes to show the background text behind them.
Step 3 − In the final step, we will use those different classes of the elements defined in the last step to use −before and −after pseudo elements on them and show background text using CSS.
Example
The example below will explain the above algorithm as well as the use of the :before and :after pseudo elements to show background text −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.pseudo {
width: 500px;
}
.pseudo-before:before {
content: "Tutorialspoint";
position: absolute;
transform: rotate(320deg);
color: grey;
opacity: 0.3;
left: 50%;
z-index: -1;
}
.pseudo-after:after {
content: "Tutorialspoint";
position: absolute;
transform: rotate(320deg);
color: grey;
opacity: 0.3;
left: 50%;
z-index: -1;
}
</style>
</head>
<body>
<center>
<div class = "container">
<h2>Use text as background using CSS</h2>
<p>The <b> :before and :after pseudo elements </b> are used to show the text as background of below text.</p>
<p class = "pseudo pseudo-before"> <b> Background text shown using before element. </b> <br> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
<p class = "pseudo pseudo-after"> <b> Background text shown using after element. </b> <br> The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</p>
</div>
</center>
</body>
</html>
In the above example, we have used the :before and :after pseudo elements with the z-index CSS property and positioned them absolutely relative to their parent to define their posotion and used some other CSS proeprties to show the given content as background text.
Conclusion
In this article, we have learned about the two different ways of showing the text as background using the CSS properties. We have discussed both of these methods in details by implementing them practically inside the code examples. You can use any of these methods with any text of your choice to show as background while building interactive UIs. It is effective to use pseudo elements approach as they will not add any extra markup in the HTML document and will not interrupt the document.
240 Views
