Skip to content
Submitted about 1 year ago

Profile card component using CSS

Rajaul Islam Ratul•1,250
@ratul0407
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 set the background images and gave them a position of

background-position: right 50vw bottom 40vw, left 50vw top 50vw;

And I was wondering if there is a better way of doing it 🤔 cause in certain breakpoints the background image won't show up🙁

So if someone could tell me a decent solution to this problem I would be very grateful

And of course All feedbacks are welcome✔✔

Community feedback

  • markus•2,160
    @markuslewinPosted about 1 year ago

    I think using viewport units is a great idea, but you probably want to use vh instead of vw for the values of top and bottom, so that the images are positioned relative to the width and the height of the viewport.

    body {
  background-position: right 50vw bottom 40vh, left 50vw top 50vh;
}
    Marked as helpful
    0
    Rajaul Islam Ratul•1,250
    @ratul0407Posted about 1 year ago

    @markuslewin thanks markus it was really helpful and now the image is displaying itself in every breakpoints🎉

    1

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