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
4 Replies
I put the image inside a div so I can use the pseudo element ::after hence the class name div_pic
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 divI 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
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 ).