how to achieve this design.
Hey, would anyone be able to give me some insight on how to achieve the purple backdrop in this frontend mentor project? I assume it would be done with a pseudo element or position absolute but due to where it ends perhaps it somehow living on the hero grid would be more appropriate? i'm not entirely sure. Thank you in advance.
14 Replies
https://discord.com/channels/436251713830125568/1240412322262945984
Hey, I think this issue can go a long way to help
Hey, i appreciate that but unfortunately that didn't really help me out, i think in that post the issue is the curve and the phone image whilst i'm referencing the placement of the purple background.
I think they're referring to the radial-gradient, which is probably the way to accomplish this
but then what would you put the radial gradient on? you can't put it on the div containing all the content because it wouldn't stop where you'd need it to?
I wouldn't know, cause you haven't shared any code.
probably on whatever nearest parent has full width on it
i was just asking opinions of methods, i don't have any code to give right now, that's why i outlined the sections to give ya'll an idea of the containers.
right, then maybe this one?
one moment, let me whip some code up to make this a little easier to explain.
let's say you have something like this, my first thought was to somehow link the background to the grid to make it stop at the desired row as my main concern is how to make it stop where it does to give the overlap effect. I could do a pseudo element with a height but that'd have to change at different screen sizes and i'd rather it stay where it needs to without having to do that. https://codepen.io/deerCabin/pen/xxNZmoe
in this example, I would put a radial gradient on the body, then use media queries if you need to shift it around
but honestly, it's potentially easier to redo the HTML and CSS so that the sections cover the full width of the page, and then have the top and bottom have solid colors and the middle one have a radial gradient
i adjusted the codepen, so have the layout like that and then do the background stuff?
yeah, that sounds right
that's where you can use EIO's link, there's a gradient in there you should be able to adjust
ahh makes sense, thank you both
just a follow up, i was playing around with it and i think i figured out how to do what i was attempting to do with the background connecting to the grid rows, this is a valid solution right? https://codepen.io/deerCabin/pen/xxNZmoe