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

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(
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

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


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

I couldn’t find this looking back, thanks.

I’m glad I could help.

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.