Submitted almost 2 years ago

Profile card with absolute positioning and cross-browser compatibility

#bem

Julio Cinquina• 270

@JulioCinquina

Preview site View code

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

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• 850

@Fahatmah

Posted almost 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.

Julio Cinquina• 270

@JulioCinquina

Posted over 1 year ago

Thank you!

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