I can`t understand why it doesn`t work without element :before

Curriculum Help
,
1 
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://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
2

Hi @alastrenok!

Welcome to the forum!

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

Are you asking why the exact same CSS won’t work if you remove :before from the selector?

:before is basically adding a new element (a pseudo-element) to the page and thus the CSS properties you use for it might not work for the <body>. For example, you are setting the pseudo-element to position: fixed which isn’t going to produce the results you want if you set that on the <body>.

You can definitely make this background work without using :before but you’ll need to make some changes to the CSS in order to get it to work correctly.