How to place a background image using ::before pseudo-selector in CSS?-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to place a background image using ::before pseudo-selector in CSS?

王林

Aug 19, 2023 pm 08:21 PM

cssbackground image::beforePseudo selector

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!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete

@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AM

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

Revisiting Image MapsMay 07, 2025 am 09:40 AM

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.

State of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AM

The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.

What is CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

What is CSS flexbox?Apr 30, 2025 pm 03:20 PM

Article discusses CSS Flexbox, a layout method for efficient alignment and distribution of space in responsive designs. It explains Flexbox usage, compares it with CSS Grid, and details browser support.

How can we make our website responsive using CSS?Apr 30, 2025 pm 03:19 PM

The article discusses techniques for creating responsive websites using CSS, including viewport meta tags, flexible grids, fluid media, media queries, and relative units. It also covers using CSS Grid and Flexbox together and recommends CSS framework

See all articles