What is this code snippet for in the Survey Form example?

1

Working on the Web Design project #2: Survey Form. In the example there is a bit of code I am not following:

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(...);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

Specifically the second line: content: ''; ? It appears to insert nothing at all? Why?

Cheers
opalko

2

::before and ::after must always have a content property defined.
More information: Create a More Complex Shape Using CSS and HTML

3

I couldn’t find this looking back, thanks.

4

I’m glad I could help.

5

Ok I am still confused. Why not put the majority of that code snippet in the body {} section anyway? If it is inserting the background image / color before the body element (umm…what?) what is it doing differently than just inserting it into the body element directly? When I try just that the difference I see is that the image is not “shrunk” to the page but otherwise the same.