Hi!! I have two questions that I can not answer. a) I messed up the background circle. I used position property. Is there any better or recommended method to code the background image? b) What is the correct method to center the avatar between two divs? I used negative margin but I know it is not the correct method.
Thank you:))))
@edufelibugm
Posted
Hi @pippal5536 !!! 😄
I can't help you with the background but about at center a image between two divs, i recommend you use the atribute position: relative and add attributes how top: ;, bottom: ;, left: ; and right: ; to center the image. ✍
other solution is the use of atribute position: absolute; 🤖
Have a great day and happy coding 🤖
Marked as helpful
@noheezybucket
Posted
Hi ,
Your HTML code is clean. Seems like you project is looking great on all screen sizes:), but I think you can put some side margin at 320px, there's no space between the body and the borders of the card.
I hope that you will find the answer of your questions right here :
a- https://www.w3schools.com/css/css_background.asp
b- to center the avatar between two divs you can try this in your css:
.avatar img { position: absolute; top: 50%; transform: translateY(-50%); }
.avatar { position: relative; }
Keep coding man.
Marked as helpful
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
