'before pseudo classifier not working in React

I wanted to apply a background image to the whole of my react app and give it an opacity. I used the following code to do so.

.App::before{
   content:"";
   background-image: url("./../../public/images/watermark.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   position: absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   z-index: -1;
   opacity: 0.1;
}

But when I remove the ::before pseudo classifier the background image gets applied but it affects the child components. If I use ::after even then no background is applied. Why is it so and what can I change?

cssreactjs


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions