Skip to content
Submitted about 4 years ago

Simple HTML and CSS code. Used inkscape to merge the .svg files.

Uddeshya Raj•20
@Uddeshya-Raj
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

To make the desired background for the page I actually merged the bg-pattern-top.SVG and bg-pattern-bottom.SVG into a single background.SVG file. I would like to know whats the correct way to create the desired background image without merging the .svg files so that the background image stays responsive.

Code

Please log in to post a comment

Log in

Community feedback

  • Raymart Pamplona•16,040
    @pikapikamart

    hey, you don't have to do that. The trick is pretty simple, just make 2 img elements, and its src attribute will just be the path of the svg file. Then just make them absolute for proper allignment. Or you could make use of pseudo elements like ::before and ::after and have their background-image: url() the path of the circle svg. Just ak if need clarifications^^

  • Account deleted

    Hey Uddeshya 😀

    A different way of applying multiple background images without combining them into one image, is to add multiple images to the background-image property.

    I recommend [this] (https://ishadeed.com/article/css-multiple-backgrounds/) article as a good read on the topic.

    Quick Note: There appears to be some awkward space between the profile picture's border and the profile picture itself. You could consider applying the profile picture as a background image to remove it.

    I hope you found this useful.

    Happy coding!

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