Skip to content
Submitted about 3 years ago

Profile Card Component | @luidrawly

Luisfer Doria•60
@luis123doria
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi! My name is Luisfer and Im a Newbie here:D I hope u enjoy my third project. Feel free to comment and give me a feedback:))

I have researched articles on the internet and it has been impossible for me to apply the background as required by the project. Combine the .svg and the colored background in a single image to place it in the background, because otherwise I could not; How could I make the background as the project indicates? I mean, the body with a background-color and then place the .svg on top of that background without it breaking into the layout? Thank u so much:D

Community feedback

  • hardy•3,660
    @hardy333Posted about 3 years ago

    Hi Luisfer. Second time commenting on your solution, glad to see you are so consistent, that is a key to success.

    First of all you are definitely improving very fast, that is so impressive.

    Your card looks super clean and nice - GOOD JOB.

    So now about background-images XD ... seems like you couldn't be able to use 2 pictures as a background of body but you was able to come up with other ways for desire result, that is very good.

    Thing is that you can use background-color and several background-images at the same time on one element(body in your case). To achieve that you need to understand several background-image properties,

    1. background-position:
    2. background-size :
    3. bcackgorund-repeat:
    4. background-image:

    I suggest to check those recurses to learn them:

    • this one for background shorthand property. On this link you will find tutorial for every other property mentioned above.
    • this one is video.
    • this one another video about positioning background-images.

    That's it, just play around with images and those properties and you will eventually figure it out how everything works, to be honest background: property is very complicated and complex so take your time ...

    One suggestion I will also give is to use different images, especially small fixed size images, for learning they they are more intuitive to understand, svg images sometimes are scaling and dynamic and it is hard to figure out why thing are happening.

    Marked as helpful
    4
    Luisfer Doria•60
    @luis123doriaPosted about 3 years ago

    @hardy333 Hi! Thank you very much for your comment and help you give me! I'll go through, read, and see the links you've posted to better understand the background-image property. In the next challenge I hope to be able to apply this knowledge in a better way to improve in that aspect; there are many things that I still have to learn: tricks and tips to obtain surprising results with CSS and HTML

    I will take your advice and suggestions for my next projects, thank you very much indeed!:D

    2

Please log in to post a comment

Log in with GitHub

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