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 place background image using ::before pseudo selectors in CSS?
The CSS contains multiple pseudo selectors and the ‘::before’ pseudo selector is one of them. Every pseudo selector of the CSS allows us to style the HTML elements with different styles.
Also, the ‘::before’ pseudo selector allows us to set up the background image for the particular HTML, which we are going to learn in this tutorial.
Before we start with the tutorial, let’s clarify that ‘:before’ and ‘::before’ are equal. CSS2 uses the ‘:before,’ and CSS3 uses the ‘::before’.
Syntax
Users can follow the syntax below to use the ‘::before’ pseudo selector to set the background image for particular HTML element.
.div::before {
content: "";
background-image: url("URL");
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
}
In the above syntax, we used the ‘::before’ selector with the css selector. In actuality, it adds the content before the element. Here, we have taken empty content as we don’t need to set any HTML content. We used the background-image property to set a background image and the position property to set the position of the background image.
Example 1 (Setting up Background-image Using ‘::before’ Pseudo Selector)
In the example below, we created the div element containing the ‘background’ class. In CSS, we access the div element using the class name and apply the CSS style. Also, we used the ‘::before’ pseudo selector with the class name of the div element to add the background image.
We set the top, bottom, left, and right positions in the selector. Also, we added some properties related to the background image to manipulate it. In the output, users can observe the background image on the whole web page.
<html>
<head>
<style>
.background {
padding: 15px;
margin-bottom: 15px;
width: 500px;
height: 500px;
font-size: 20px;
text-align: center;
}
.background::before {
content: "";
background-image: url("https://www.tutorialspoint.com/static/images/simply-easy-learning.png");
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
z-index: -1;
}
</style>
</head>
<body>
<h2> Using the <i> ::before psuedo selector </i> to place background image using CSS </h2>
<div class = "background"> Welcome to the TutorialsPoint! </div>
</html>
Example 2 (Setting up a Background Image for a Particular div Element)
In the example below, we demonstrated to use of the ‘::before’ pseudo selector to set the background image for the particular div element.
Here, we set the dimensions for the image in the pseudo selector to set the background image for only a particular div element. Also, we used the ‘background-size: cover’ property.
In the output, we can see the div element containing the background image rather than the whole div element.
<html>
<head>
<style>
.background {
padding: 15px;
margin-bottom: 15px;
color: red;
width: 500px;
height: 500px;
font-size: 20px;
text-align: center;
font-size: 3rem;
}
.background::before {
content: "";
background-image: url("https://www.tutorialspoint.com/static/images/simply-easy-learning.png");
position: absolute;
background-repeat: no-repeat;
background-position: center;
width: 500px;
height: 500px;
background-size: cover;
z-index: -1;
}
</style>
</head>
<body>
<h2> Using the <i> ::before psuedo selector </i> to place background image using CSS </h2>
<div class = "background"> We set the linear gradient on the background image. </div>
</html>
Example 3 (setting up the linear gradient as a background using the ‘::before’ selector)
In the example below, we set the linear gradient as a background of the particular HTML element using the ‘::before’ pseudo selector. Here, we used the linear-gradient() function as a value of the ‘background’ property to set the gradient as a background instead of the image.
In the output, we can see the gradient as a background of the div element.
<html>
<head>
<style>
.background {
width: 600px;
height: 300px;
position: relative;
text-align: center;
color: green;
font-size: 30px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
padding: 20px;
}
.background::before {
content: "";
background: linear-gradient(to right, red 0%, orange 50%, yellow 100%);
background-size: cover;
background-position: center;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0; opacity: .5;z-index: -1;
}
</style>
</head>
<body>
<h2> Using the <i> ::before psuedo selector </i> to place background image using CSS </h2>
<div class = "background"> We have set the linear gradient for this div element using the '::before' pseudo selector. </div>
</html>
We learned to set the background image using the ‘::before’ pseudo selector. When we use any pseudo selector to add content to the web page, it adds content independently by removing the content from the current flow of the web page.
So, we can add content to the web page using the pseudo selectors without affecting the current content. Also, it adds content on top of the other content on the web page. Here, also it adds a background image on top of other content, but we used the ‘z-index’ property to set an image as a background of the div element.
3K+ Views
