i'am having trouble with pseudo elements-CodePudding

body {
  background: #111;
  filter: opacity(1);
  color: #eee;
}

#about::before {
  background: url(/img/backgroud1.svg);
  width: 100%;
  height: 800px;
  filter: opacity(0.01);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <main>
      <div id="about">
        <h1>hello World</h1>
      </div>
    </main>
  </body>
</html>

Can someone tell me why my background image is not displayed I want my heading to be on top of a background image.

CodePudding user response：

A ::before psuedo-element won't display anything if it doesn't have any content so give it some content
height and width do nothing on an element which is display: inline which ::before is by default
With an opacity as low as you are setting, it will be as good as invisible. Increase the opacity so you can see it.
You need to absolutely position the element (with a positioned container to anchor it) if you want the text to be on top of the image

body {
  background: #111;
  filter: opacity(1);
  color: #eee;
}

#about {
    position: relative;
}

#about::before {
  background: url(http://placekitten.com/200/200);
  width: 100%;
  height: 800px;
  filter: opacity(0.50);
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <main>
      <div id="about">
        <h1>hello World</h1>
      </div>
    </main>
  </body>
</html>

CodePudding user response：

you should put string marks in the url protion

 background: url("/img/backgroud1.svg");