Transparent background image
Hey, is this a semantic/efficient way to create an image that has decreased opacity with text on top?
https://codepen.io/deerCabin/pen/vYQqrvV
14 Replies
Didn't you already do it in your codepen? Or are you looking for something better?
yeah i was playing around with methods for it and was just wondering if there was anything better or if what i had was the best way
The way I do it is about the same but I'm curious too if there are better ways
ah which way do you go about it? yeah most people have the
section element have the background image and add the ::before pseudo element as a black box with a decreased opacity on top from what i've seen, i just tried to simplify it.
just glad i didn't overcomplicate it and that it's valid š
Your way is better than the way I've been doing it haha
The codepen I sent doesn't work š
Oh that's why
https://codepen.io/vince1444/pen/bGQPjNN
ahhh it's the way i said š
seems like we helped eachother here š
always good
You want to use my way? š«£ It's worse than yours
More markup and css
i meant we figured out mine was a good solution and it helped you improve yours š
Ohhh haha
yeahh haha
thank you
ofc š š thank u too
no worries š
whilst we're here @vince, back on the topic of layouts š
, for centering content exactly in a div, let's say for a full screen hero section, any of the methods from
flex box justify content & align items to grid place content are all valid methods right? there's no one better than the other etc?Ya it just depends on the content you want inside the section, flex and grid both work but sometimes one is better than the other
Just comes down to experience and using them so I'd say just pick one and maybe the next time you implement something similar, you can try grid and see if it's easier
Typically my rule though is that if you want your children to determine their own widths, use flex, but if you want your container to determine children widths, use grid
ah gotcha, thank you š