Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to place background image using ::before pseudo selectors in CSS?
To place background image using ::before pseudo selectors, we will be using background-image and ::before pseudo element. CSS ::before pseudo-element is used to add content before the selected element with the content property allowing to insert text, images, or decorative elements, without modifying the HTML structure.
This technique is particularly useful when you want to add a background image that can be styled independently from the main element, providing better control over layering and positioning.
Syntax
selector::before {
content: "";
background-image: url("path/to/image.jpg");
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
Key Properties Required
| Property | Purpose | Required |
|---|---|---|
content |
Creates the pseudo-element (must be empty string "") | Yes |
position |
Positions the pseudo-element relative to parent | Yes |
background-image |
Sets the background image URL | Yes |
z-index |
Controls stacking order (negative to place behind content) | Recommended |
Example: Background Image with ::before
Here is a complete example showing how to place a background image using ::before pseudo selector
<!DOCTYPE html>
<html>
<head>
<style>
.background {
position: relative;
padding: 40px;
width: 400px;
height: 300px;
font-size: 24px;
text-align: center;
color: white;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
border: 2px solid #333;
margin: 20px;
}
.background::before {
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='%234CAF50' d='M0 0h100v100H0z'/%3E%3Cpath fill='%23388E3C' d='M20 20h60v60H20z'/%3E%3C/svg%3E");
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-repeat: repeat;
background-size: 50px 50px;
z-index: -1;
opacity: 0.8;
}
</style>
</head>
<body>
<h3>Background Image with ::before Pseudo Selector</h3>
<div class="background">
Welcome to TutorialsPoint
</div>
</body>
</html>
A div container with a green patterned background image applied via ::before pseudo-element. The text "Welcome to TutorialsPoint" appears in white with shadow over the background pattern.
Key Points
- The parent element must have
position: relativefor absolute positioning to work correctly - Always set
content: ""to create the pseudo-element - Use
z-index: -1to place the background behind the content - The ::before pseudo-element covers the entire parent when using
top: 0; left: 0; right: 0; bottom: 0;
Conclusion
Using ::before pseudo-element for background images provides excellent control over image positioning and layering. This technique allows you to add decorative backgrounds without affecting the main content structure or requiring additional HTML elements.
7K+ Views
