Skip to content
Submitted over 2 years ago

Profile Card

Jason•140
@jsngmb
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I couldn't figure out how to position the background image, so I hide the scrollbars and adjust the margin of the background images. Is there any way/ a better way to adjust the SVG background images? Please do let me know. Thank you so much.

Community feedback

  • Ahmed Bayoumi•6,740
    @Bayoumi-devPosted over 2 years ago

    Hey Jason!

    • An easy way to handle the background circles, Give the body or the profile card container the following style to put these circles as a background image:
    body {
  margin: 0;
  font-family: "Kumbh Sans";
  /* background-color: var(--DarkCyan); */ <--- Remove
  /* overflow: hidden; */   <--- Remove

  min-height: 100vh;
  background: url(../images/bg-pattern-top.svg) right 50vw bottom 40vh no-repeat,
    url(../images/bg-pattern-bottom.svg) 50vw 50vh no-repeat var(--DarkCyan);
}

/* The scrollbar will appear because `p` has a default `margin` ---- Remove `margin` */
p {
  margin: 0;
}
    Marked as helpful
    0
    Jason•140
    @jsngmbPosted over 2 years ago

    Hi @Bayoumi-dev Thank you so much.

    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