How to place background image using ::before pseudo selectors in CSS ? Last Updated : 11 Oct, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report The ::before pseudo-element to place a background image in CSS means adding an image behind content by creating a virtual element before the main content. The ::before element is styled with background-image, content, and positioned with CSS, enhancing design flexibility.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: Using ::before pseudo selectorsThe ::before pseudo-selector adds a background image before the selected element. If the element has a background color, use the z-index property to position the image behind the content, making it visible.Example: In this example we are using the ::before pseudo-element to add a background image behind the content in the .container. It positions the image with absolute, sets opacity, and uses z-index to layer it. 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( 'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200212230557/ How-To-Become-A-Web-Developer-in-2020-A-Complete-Guide.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: Comment More infoAdvertise with us S shahbazalam75508 Follow Improve Article Tags : Technical Scripter Web Technologies CSS Technical Scripter 2020 CSS-Questions +1 More Similar Reads JavaScript Tutorial JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.JavaScript on Client Side: On the client side, Jav 11 min read Web Development Web development is the process of creating, building, and maintaining websites and web applications. It involves everything from web design to programming and database management. Web development is generally divided into three core areas: Frontend Development, Backend Development, and Full Stack De 5 min read React Interview Questions and Answers React is an efficient, flexible, and open-source JavaScript library that allows developers to create simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook, created React. Developers with a JavaScript background can easily develop web applications 15+ min read React Tutorial React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user experience.Note: The latest stable version 7 min read JavaScript Interview Questions and Answers JavaScript is the most used programming language for developing websites, web servers, mobile applications, and many other platforms. In Both Front-end and Back-end Interviews, JavaScript was asked, and its difficulty depends upon the on your profile and company. Here, we compiled 70+ JS Interview q 15+ min read Decorators in Python In Python, decorators are a powerful and flexible way to modify or extend the behavior of functions or methods, without changing their actual code. A decorator is essentially a function that takes another function as an argument and returns a new function with enhanced functionality. Decorators are 10 min read AVL Tree Data Structure An AVL tree defined as a self-balancing Binary Search Tree (BST) where the difference between heights of left and right subtrees for any node cannot be more than one. Balance Factor = left subtree height - right subtree heightFor a Balanced Tree(for every node): -1 ≤ Balance Factor ≤ 1Example of an 4 min read Domain Name System (DNS) DNS is a hierarchical and distributed naming system that translates domain names into IP addresses. When you type a domain name like www.geeksforgeeks.org into your browser, DNS ensures that the request reaches the correct server by resolving the domain to its corresponding IP address.Without DNS, w 8 min read What is a Neural Network? Neural networks are machine learning models that mimic the complex functions of the human brain. These models consist of interconnected nodes or neurons that process data, learn patterns and enable tasks such as pattern recognition and decision-making.In this article, we will explore the fundamental 12 min read HTML Interview Questions and Answers HTML (HyperText Markup Language) is the foundational language for creating web pages and web applications. Whether you're a fresher or an experienced professional, preparing for an HTML interview requires a solid understanding of both basic and advanced concepts. Below is a curated list of 50+ HTML 14 min read Like