Submitted about 3 years ago

Profile Card Component using HTML+CSS.

lai•10

@laipatel

Preview site View code

This is a solution for...Profile card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I have learned through the MDN Web Docs (https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#css_background_images) that you should use CSS for decorative images and HTML for images that have meaning within the webpage. However, positioning the decorative background circles so that it supports all resolutions without using the HTML image element was difficult (and still not correctly implemented). This is what I had the main issue with and spent the majority of the time on. I would like to learn how to position the background circles so that they are pinned to the top left and the bottom right and approach the top center and the bottom center as the screen shrinks for a more responsive design.

Community feedback

Om Kakatkar•90

@OmKakatkarPosted about 3 years ago

Hi,

For the background circles, you are going the correct way by applying them as a background image.
Instead of going with percentages for the background-position like the below snippet you wrote :

body {
	background-color: hsl(185, 75%, 39%);
	background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
	background-position: -350px -500px, 700px 350px ;
	background-position: top -150% left -10%, bottom -150% right -5%; 
	background-repeat: no-repeat;
}

You can try the following :

 body {
  background-image: url(../images/bg-pattern-top.svg),
    url(../images/bg-pattern-bottom.svg);
  background-repeat: no-repeat;
  background-position: right 50vw bottom 50vh, left 50vw top 50vh;
  bbackground-color: hsl(185, 75%, 39%)
 }

This will most likely solve your problem. You can also try going over My Solution if you don't understand anything.

Happy Coding!!✨✨

Mojtaba Mosavi•3,760
@MojtabaMosaviPosted about 3 years ago
There are could be better solution to this one but the way I'd have implement it would be be having some sort of container somthing like main in your solution and using the background property position the accordingly.

Keep coding :=)
0

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