Skip to content
Submitted over 3 years ago

Curved background using before and after

Mohamed•325
@MohamedBehhar
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with curved sections
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

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.

Community feedback

  • Shaibu Abdulsalam•90
    @AbshaibuPosted over 3 years ago

    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.

    0

Please log in to post a comment

Log in with GitHub

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