So first off, I am looking at the basic HTML CSS projects, the survey page project.
If you look at the CSS code on that example, you’ll see it has a body::before declared, I understand a bit about how ::before works, it applies code before something. But I understand it more clearly with
or examples like that.
p::before{
content:"HEY LOOK ";
}
<p>Hi there</p>
Would look like this: HEY LOOK Hi there
But on that example, I don’t understand how body::before works in this example.
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: var(--color-darkblue);
background-image: linear-gradient(
115deg,
rgba(58, 58, 158, 0.8),
rgba(136, 136, 206, 0.7)
),
url(https://raw.githubusercontent.com/lasjorg/fcc-form-example-image/master/67103817-7c51e200-f18b-11e9-975f-f74561336a9a-lj.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
This code for the most part makes sense, but my question is, why doesn’t it work in just a body tag? Why must ::before be included for this to work?
If you don’t include the ::before, and you just put everything in body{}, it will show everything normally, even the background, but the RGBA color part will not display, actually it will display but it will be UNDER the background, why is this? Can someone explain why it appears this way?
I mean, why can’t I put it this way???
body{
content: '';
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: var(--color-darkblue);
background-image: linear-gradient(
115deg,
rgba(58, 58, 158, 0.8),
rgba(136, 136, 206, 0.7)
),
url(https://raw.githubusercontent.com/lasjorg/fcc-form-example-image/master/67103817-7c51e200-f18b-11e9-975f-f74561336a9a-lj.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
WITHOUT A BEFORE TAG, that is my question, clearly you can see it doesn’t work, you wont see the gradient background color ontop the image, why is this? I want to understand why this happens and why you need body::before to make this work.