Breaking News: Grepper is joining You.com. Read the official announcement!

before pseudo selector for assigning background image

Inexpensive Iguana answered on August 15, 2022 Popularity 7/10 Helpfulness 5/10

answer before pseudo selector for assigning background image

before pseudo selector for assigning background image

Comment

<!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>

Popularity 7/10 Helpfulness 5/10 Language css

Source: www.geeksforgeeks.org

Tags: background-image css selector

Link to this answer
Share Copy Link

Contributed on Aug 15 2022

Inexpensive Iguana

0 Answers Avg Quality 2/10

before pseudo selector for assigning background image

Contents

More Related Answers

before pseudo selector for assigning background image

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.