Cant get before pseudo statement to work

HTML-CSS
#1

Hello fellow coders,

I have sadly spent way too much time trying to dim/change the opacity on the background image on my Tribute Project. I have checked many times with reference guides and other codepen works, also ran it through a CSS checker with zero errors. I’m confused in why the Before CSS statement isn’t working in order to dim the background so the text is visible. Thank you for the help.

Project Link: https://codepen.io/pen/?template=wvgqZgQ

#2

hi, the before statement with no special modification behaves as just like any other element. This means in order for ::before to even show up on the viewport, you have to include actual content, or height/width values. In this case you want it to be

height:100%;
width:100%;

so it is the same size as main.

Then it would show up before the main element as it should, since it is main::before. To get it to perfectly overlap main itself we can give it:

position:absolute;
top:0;
left:0;

now it should show up as a dimmed background image.

EDIT: you should also give main position:relative so the ::before knows what to use as reference with absolute positioning.
See my forked version of your codepen to see it in action. https://codepen.io/bill-ye/pen/oNBGaoP

#3

Thank you very much. Do you have any tips to get the frontward text not to be affected by the change in opacity?

#4

Hi, I’m slightly unsure of what the issue is, as the text on your page does not seem to be affected. Can you please elaborate on what you mean by “frontward text”?

#5

Here is the updated page with the opacity I’m looking for.
https://codepen.io/pen/?template=wvgqZgQ. The image and rest of the text is also affected by the opacity attribute, which is not what I want to happen. I want the background image opacity changed without anything else being affected.

#6

For that you need to move everything related to background out of your #main into your #main::before, and add an opacity value in your ::before pseudoelement here.
Is this what you are looking for? https://codepen.io/bill-ye/pen/VwPywNY

#7

Yes, thank you. I had actually managed to do it yesterday as played around with it using the z order. But thank you for your updated post.

#8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.