Submitted over 2 years ago

Profile card with absolute positioning and cross-browser compatibility

Julio Cinquina•270

@JulioCinquina

Preview site View code

This is a solution for...Profile card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

The two circles in the background are absolutely positioned <img> elements. Is this a good approach for positioning items in the background? I tried placing the circles with the "background" property, but positioning them correctly with "background-position" turned out to be difficult. It seemed more intuitive to use absolute positioning and "transform: translate();".

In this project, I came across a difference in how outlines are rendered in Safari compared to other browsers. If I didn't have access to an iOS device, I probably would not have realized this. Is there a simple way to see how a page will be rendered in different browsers and devices?

Community feedback

Fat•910
@FahatmahPosted over 2 years ago
Hello there!

For the positioning of background, I suggest you can use background-position: top left, bottom right; background-size: 50% 50%, 50% 50%;

The background-position is self-explanatory hehe. While background-size the first two 50% is for the first background or the top left background part. So, first 50% is for width and the second 50% is for the height same as the second two 50%. I hope it helps you.
1
Julio Cinquina•270
@JulioCinquinaPosted over 2 years ago
Thank you!
1

Please log in to post a comment

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