Background Image Opacity

Language Help CSS
1

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

https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-web-development-foundations/tracks/fscj-22-fundamentals-of-css/modules/wdcp-22-learn-css-selectors-and-visual-rules-0507dd23-134e-4011-af2c-a06b06ad53f2/projects/css-visual-rules-project

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

body {
background-image:url(‘https://content.codecademy.com/courses/learn-css-selectors-visual-rules/hypnotize_bg.png’);
}

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:

2

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.