background-image will not change opacity or color

[codingstudent]

apologies if this is a duplicate-I posted this a few minutes earlier and tried to edit it to fix the markdown and it somehow disappeared

HELLO good people of CSS Tricks.

I’m a new student learning HTML/CSS/JS and have spend the last few hours (yeah, that long) trying to figure out why this isn’t working in my code. I’m trying to change the color and opacity of the image so that the text in the welcome div is more readable.

1. background-image is set in CSS under body
   * If you see my codepen here you can see the structure of the HTML and the CSS.
   * I found something on both CSS tricks and stack overflow that said that if I created a layer on top of the image I could achieve color change and opacity. Unfortunately, I had to comment that out because it didn’t work.
   * Can someone tell me what I’m doing wrong here? I’ve set background color via rgba with an opacity setting in the body where the background-image is linked but this has no effect on the image.
2. Bonus question-I’ve also commented out a background-image url beneath the functioning one.
   * This links to an image on my imgur-but the link doesn’t work.
   * I’ve wracked my brains trying to figure out why but the syntax is correct, etc and I have links to other images in my imgur that appear just fine elsewhere.
3. edit-bonus bonus question–what am I doing wrong here in markdown? I referenced the markdown link below (and it’s the same as what I use on github) but none of the formatting took?

Thank you for reading–again, I’m new to this so if I’ve left anything out, please let me know.
-a grateful student.

[Paulie_D]

I’m not clear on what it is you are trying to do.

You can’t affect the opacity of a background image….only a background color (as you say using RGBA).

[Paulie_D]

What you can do is use a pseudo-element and affect the opacity of that/

https://codepen.io/Paulie-D/pen/MOLRYQ?editors=1100#0

[codingstudent]

Hi–I’ve edited my question for clarity. Thanks.

[Shikkediel]

There a typo, for one. It says rbba…

[codingstudent]

@shikkediel fixed and doesn’t fix the issue. additional ideas?

[codingstudent]

@Paulie_D

Thanks for the constructive reply.
Does the * in the first line of the CSS function as a wildcard?
MDN docs on pseudo-elements for CSS doesn’t mention it and I checked several other google searches.

Thanks again!

[Shikkediel]

The opaque background colour is there but as Paulie mentioned, it does not affect the image itself. They are a stack of two layers of background.

https://www.w3schools.com/cssref/sel_all.asp

By the way, you imgur image seems to link fine. And blocks of code can be created by either using one tilde around a word/phrase or three in a row to create a larger section:

Like this one

[codingstudent]

@shikkediel

thank you.
new info on the * selector (!!!) that seems in line with the info on w3 and stack overflow though those solutions involved creating a new div rather than a pseudo-element (pseudo element seems cleaner, right?) I tried the additional layer in my original code but couldn’t really figure out why it wasn’t rendering the way I’d intended.

not sure how you embedded the the div above–would you mind sharing the code? I don’t think (in my brief time doing this) I’ve yet come across ~~~

funny about the imgur link I still can’t get it work using my imgur link.

Thank you both @paulie_d and @shikkediel for your time.

[Shikkediel]

Sorry, some minor misinformation there. It’s actually the backtick character below the tilde…

And yes, a pseudo element is the nicer approach in my opinion too.

[Author]

Posts