Background Image Opacity

Hello everyone, I am dealing with the Olivia Woodruff Portfolio project - (fundamentals of CSS)

The last task of this project is about setting a background image for the whole body, so I insert in the CSS file:

body {

Now, out of curiosity, my question is the following:

  • Is there a way to edit the background image opacity without affecting the rest of the content in the ‘body’ section?

thanks in advance for your help! I hope it’s clear my question. It’s my 1st post please be patient :slight_smile:

I had this same question when I started to learn CSS and in fact, there is actually a way to do that.
You can use the ::before pseudo-element like so:

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background-color: #E6F7FF;
  opacity: 0.7;

the pointer-events property allows pointer events such as clicks and hovering to pass through without this overlay capturing them. Other properties are obvious I believe.