Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

profile-card-component

@IcyEazy

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How do I go about the background? Am I using the SVG as background-image in CSS or an element in HTML?

Community feedback

@aandreluis

Posted

Hello, I believe that the best way to put the background is with css like you did! background-image allows you to use more than one image, just use one: ,

Ex:

background-image: url(), url();
background-repeat: no-repeat, repeat;
background-position: right 53px bottom 40px, left 53% top 40%;

Separating with , you will get a result similar to the original design... Hope this helps!👍

Marked as helpful

1
rahmad 230

@rahmadsubakti

Posted

I prefer background-image, since you can use more than one image and position them. If you use element like <img> you have to make their position as absolute and their parent's position as relative

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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