Need help with my image and linear gradient property

How Would I get my image to remain solid white but the background remain the color its supposed to be without fading the image color. If you look at my copy of the challenge design my image fades with the background, but on the challenge itself the image remains solid and is not affected by the background color
No description
No description
No description
4 Replies
JJ
JJ10mo ago
I put the image inside a div so I can use the pseudo element ::after hence the class name div_pic
MarkBoots
MarkBoots10mo ago
I don't know if I understand your question correctly but now you have 2 background images: the gradient and the icon. The order here is that the first one (gradient) is on top of the second one (icon). I think you want it the other way around off topic: I don't see the reason why you set the width and height to 100%, position it to 50% top and left and then translate it back you can just use position: absolute; inset: 0 to make it cover the whole div
JJ
JJ10mo ago
I appreciate the advice it fixed my problem and i never knew about the position: absolute and inset: 0 i thought to center anything using position: absolute you had top use the top left and transform property appreciate the tips
clevermissfox
clevermissfox10mo ago
Inset is a shorthand for “top” “right” “bottom” “left”. So Inset:0 is the same as top:0; right:0; bottom:0; left:0; Being as it’s a shorthand you could also set something like inset: 0 2rem 50% 0; instead of top:0; right:2rem; bottom:50%; left:0; But inset: 0 is handy if you want it to take up the whole element. Inset: -1rem to make it 1rem larger on all sides: inset: 1rem to make it inset by 1rem on all sides; The top:50% left:50% ; transform: translate(-50%, -50%) is a handy hack before there were easy ways to center an element (now we have flex and grid and with it the ability to also set margin-block: auto as well as the align and justify properties ).
Want results from more Discord servers?
Add your server