How to place background image using ::before pseudo selectors in CSS ?
Given a web page and the task is to place the background image on web page using ::before pseudo selector.
The ::before pseudo selector is used to place something before the content of the selected items.
Syntax:
.container::before{
content: '';
background: url(image file);
position:absolute;
top:0px;
left:0px;
}Approach: The ::before pseudo selector places the background image before the selected element and if the selected element has a background color associated with it, we can use the z-index property to make the background image visible.
Example:
HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> How to place the background image using ::before pseudo selectors ? </title> <style> * { margin: 0px; padding: 0px; } body { text-align: center; } h1 { color: green; } .container { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; color: black; font-weight: bold; font-size: 2rem; } .container::before { content: ''; background: url('bg.png') no-repeat center center/cover; position: absolute; opacity: 0.3; top: 0px; left: 0px; width: 100vw; height: 100vh; z-index: -1; } span { font-size: 2em; } </style></head> <body> <div class="container"> GeeksforGeeks<br><br> How to place background image using ::before pseudo selectors ? </div></body> </html> |
Output:
Image Reference: https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200212230557/How-To-Become-A-Web-Developer-in-2020-A-Complete-Guide.png
.png)
