Web Front-end
CSS Tutorial
How to place a background image using ::before pseudo-selector in CSS?
How to place a background image using ::before pseudo-selector in CSS?
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 id="Using-the-i-before-psuedo-selector-i-to-place-background-image-using-CSS"> 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 id="Using-the-i-before-psuedo-selector-i-to-place-background-image-using-CSS"> 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 id="Using-the-i-before-psuedo-selector-i-to-place-background-image-using-CSS"> 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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to implement a tight transition animation in React using react-transition-group?
Apr 04, 2025 pm 11:27 PM
Using react-transition-group in React to achieve confusion about closely following transition animations. In React projects, many developers will choose to use react-transition-group library to...
The width of emsp spaces in HTML is inconsistent. How to reliably implement text indentation?
Apr 04, 2025 pm 11:57 PM
Regarding the problem of inconsistent width of emsp spaces in HTML and Chinese characters in many web tutorials, it is mentioned that occupying the width of a Chinese character, but the actual situation is not...
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
How to select and style elements of the first specific class using CSS and JavaScript?
Apr 04, 2025 pm 11:33 PM
How to select and style elements of the first specific class using CSS and JavaScript? In web development, you often encounter the need to select and modify specific classes...
How to use the clip-path attribute of CSS to achieve the 45-degree curve effect of segmenter?
Apr 04, 2025 pm 11:45 PM
How to achieve the 45-degree curve effect of segmenter? In the process of implementing the segmenter, how to make the right border turn into a 45-degree curve when clicking the left button, and the point...
How to achieve gap effect on the card and coupon layout with gradient background?
Apr 05, 2025 am 07:48 AM
Realize the gap effect of card coupon layout. When designing card coupon layout, you often encounter the need to add gaps on card coupons, especially when the background is gradient...
How to accurately realize the small label effect in the design draft on the mobile terminal?
Apr 04, 2025 pm 11:36 PM
How to achieve the effect of small labels in the design draft on the mobile terminal? When designing mobile applications, it is common to find out how to accurately restore the small label effect in the design draft...
How to achieve segmentation effect with 45 degree curve border?
Apr 04, 2025 pm 11:48 PM
Tips for Implementing Segmenter Effects In user interface design, segmenter is a common navigation element, especially in mobile applications and responsive web pages. ...
