Skip to content
Submitted over 3 years ago

Using css calc() for background position

jwaykorn•180
@jwayorn
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

Want more idea to positioning 2 background images for any device

Thanks

Community feedback

  • Dineshraj•540
    @DineshrajAnandanPosted over 3 years ago

    Hi, I was working on the same problem for positioning the two background images.

    this CSS property has worked for me

    background-position: right 50vw top -90vh, left 50vw top 41vh;

    Here, I'm using viewport height, viewport width, and position reference. In this case, no media queries are needed.

    I hope, it helps you too.

    For reference, https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

    0
    jwaykorn•180
    @jwayornPosted over 3 years ago

    It work Thank you @DineshrajAnandan

    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