Skip to content
Submitted about 4 years ago

Curved background using before and after

Mohamed•325
@MohamedBehhar
A solution to the Huddle landing page with curved sections challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Help on Positioning the curved background.

Hy guys, I need your help, I used after and before to position the curved background, but I don't think it's the right way to do it, because I used a lot of @media queries to adjust the bg position every time they get away from the section.

I'll be thankful if anyone could help me.

Code

Please log in to post a comment

Log in

Community feedback

  • Shaibu Abdulsalam•90
    @Abshaibu

    Hello Mohamed, about your question you can either use multiple background image or create different divs for each curve and place them in their correct places and use these 3 properties to set it background-size: cover;, height between 23vh to 24vh and background-repeat: no-repeat;. I hope you understand my explanation and it helps you fix your problem.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord