Design comparison
Solution retrospective
How do the background images look like the original design? I could use the two images but I couldn't position them right. any ideas? also, I wonder if I can center the avatar image using a bitter way than the one I used?
Community feedback
- @RJC26Posted over 2 years ago
Hey man your having issues with the avatar image because you have placed your card background image as an image in html not a backgorund image in css, so if you delete that from html and add it in your css:
.container{ display: flex; flex-direction: column; align-items: center; background-image: url(** ADD BACKGROUND IN HER ../EXAMPLE/BACKGROUND.SVG**); background-size: contain; background-repeat: no-repeat; }
This will center the image and add the background image to your card then you need you need to add a
margin-top
to you image class and adjust it into position, also remove theposition: absolute;
from your .avatar class!As for your body background you should add background-position-x and y for example you will have to play around with the numbers but this will allow you to move them around and into position:
background-position-x: -350px, 700px; background-position-y:-500px, 300px ; background-repeat: no-repeat;
This will give it a similar look in desktop version but you will need to adjust it in your media query to look as desired for mobile! also try using
outline: 6px solid #fff;
instead of border for you image it will look better!hope this helps!!!
Marked as helpful1@KarimanMedhatPosted over 2 years ago@RJC26 Thank you so much of course it was helpful and I'm gonna try it.
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