Submitted 3 months ago

FEM Profile Card Component

Sadick Sulley•280

@Sulley-Sadick

Preview site View code

This is a solution for...Profile card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

solving the challenge all by myself and would solve a little more challenging next time.

What challenges did you encounter, and how did you overcome them?

how to do proper positioning of background image in both mobile design and desktop design then reached out to a colleague developer but still don't understand it very well but I was able to solve the challenge but not in the required manner.

What specific areas of your project would you like help with?

I would like anyone who has in-depth knowledge in better positioning of background image, I would like that person to assist if possible.

Community feedback

Boris•3,920

@makogeborisPosted 3 months ago

Here's how you can better position the background patterns

body {
  background-image: url("../images/bg-pattern-top.svg"),
    url("../images/bg-pattern-bottom.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: calc(50% - 28rem) calc(50% - 28rem),
    calc(50% + 28rem) calc(50% + 28rem);
}

Please log in to post a comment

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