Home > Article > Web Front-end > How to place a background image using ::before pseudo-selector in CSS?
How to place a background image using ::before pseudo-selector in CSS?
- 王林forward
- 2023-08-19 20:21:182788browse
CSS contains multiple pseudo-selectors, of which '::before' is one of them. Each pseudo-selector of CSS allows us to style HTML elements using 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 the tutorial, let's clarify that ':before' and '::before' are equal. CSS2 uses ':before', while CSS3 uses '::before'.
grammar
Users can use the '::before' pseudo-selector to set the background image for a specific HTML element according to the following syntax.
.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 use the '::before' selector with css selector. In effect, it adds content before the element. Here, we used empty content because we don't need to set any HTML content. We use the background-image property to set the background image, and the position property to set the position of the background image.
Example 1 (Use '::before' pseudo-selector to set background image)
In the example below, we create a div element containing the "background" class. In CSS, we use class names to access div elements and apply CSS styles. Additionally, we used the class name of the div element and the "::before" pseudo-selector to add the background image.
We set the top, bottom, left and right positions in the selector. Additionally, we added some properties related to the background image to manipulate it. In the output, the user can observe the background image on the entire 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 (Set a background image for a specific 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 use the '::before' pseudo-selector to set a linear gradient to the background of a specific HTML element. Here, we use the linear-gradient() function as the value of the 'background' property to set the gradient to the 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 use pseudo-selectors to add content to the web page without affecting the current content. Additionally, it can add content above the web page. Here, it would also add a background image on top of other content, but we used the "z-index" attribute to set the image as the background of the div element.
The above is the detailed content of How to place a background image using ::before pseudo-selector in CSS?. For more information, please follow other related articles on the PHP Chinese website!