Design comparison
Solution retrospective
The first challenge I ran into was the background and how to position the two images. I think I got close using this code:
body {
background-image: url(./images/bg-pattern-bottom.svg), url(./images/bg-pattern-top.svg);
background-position: right -7.5rem bottom -31.25rem, left -7.5rem top -31.25rem;
background-repeat: no-repeat, no-repeat;
background-size: auto, auto;
Could there have been an easier way?
The other part I struggled a lot with was the positioning of the profile image, but I think I got it right efficiently.
On the mobile design picture, there always seems to be a gap between the browser and the actual card. I have been adding a margin around the card once the browser reaches a certain width. Is this right?
@media screen and (max-width: 500px) {
body {
margin: 0 1.25rem;
}
}
Thanks for the help!
Community feedback
- @correlucasPosted over 2 years ago
Hello Wesley, congratulations for your solution!
Answering your question:
About the background-image import you've used the best way, its possible also to the same using a pseudo-element with position absolute/relative or with the property "content" inside the class, but its a really long work and you'll have to position each element and also work z-index to put the element under everything. So you have done the best choice.
For the background to keep your code clean, you can use a shorthand to write less code and reach the same properties. For background you can write color, image, repeat and position in only one property. See the example below:
Background shorthand:
body { background: #color url("your-img.png") no-repeat right 10% top 10%; }
I hope it helps you and congrats, I know how hard is work with this background multiple image position.
Marked as helpful0@wesleyjacobyPosted over 2 years ago@correlucas Hi Lucas,
Thanks so much for the feedback - It's great to know I'm on the right track with the background images.
Thanks for the tip regarding the shorthand - It's definitely cleaner! I'll refactor the code to reflect your solution.
Thanks again!
1@correlucasPosted over 2 years ago@wesleyjacoby You're welcome Wesley. By the way you did great positioning the background-images. I was lazy so exported the background with the two circles incorporated from Figma and set them as the background. Only few weeks them I discover how to apply a multiple images background and its kinda hard.
If you want to see my solution here it its: https://www.frontendmentor.io/solutions/fresh-prince-card-component-vanilla-css-easter-eggs-6Qe2CAE0H8
Happy coding!
1@wesleyjacobyPosted over 2 years ago@correlucas Thanks man - I appreciate that. I still have to learn about figma. Once I upgrade to the pro subscription, I'll see what that's all about.
Your solution looks awesome! You went above and beyond what was required - Haha. I still have so much to learn.
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