Design comparison
Solution retrospective
Hi Front-end Mentor community.
Here is my challenge for Profile-card-component. I did the background with this code example below but i dislike the behaviour when I resize it. For mobile or desktop the background looks well, my problem is when I did the translation desktop to mobile and vice-versa. If you can give any idea for a better result .
background: url(./images/bg-pattern-top.svg) -44rem -52rem / 100% no-repeat,
url(./images/bg-pattern-bottom.svg) 42rem 22rem / 80% no-repeat,
hsl(185, 75%, 39%);
@media screen and (max-width:600px)
{
body{
background: url(./images/bg-pattern-top.svg) -22rem -25rem / cover no-repeat,
url(./images/bg-pattern-bottom.svg) 15rem 20rem / cover no-repeat,
hsl(185, 75%, 39%);
}
}
Thank you all.
Community feedback
- @Randall3475Posted over 1 year ago
Hello, you should use relative values on your background-position property. Meaning, the position will adjust based on the viewport of your screen. The calc function is a good way to do this. Here's an example:
background-position: right calc(47vw + 15%) bottom calc(65vh - 15vw), left calc(40vw + 25%) top calc(72vh - 10vw);
The first calc instance is taking 47vw units and adds 15% of whatever the current screen size is to it, resulting in a dynamic position.
Finding out the right values can be tricky. You might have to play around with it.
Marked as helpful1@Lo-DeckPosted over 1 year ago@Randall3475 Thanks for your help, I will try with this relative values to find the good behavior.
1
Please log in to post a comment
Log in with GitHubJoin 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