Profile card

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @Chrisesbueno 👋, good job for completing this challenge!

  I have a suggestion that you might consider:

  You can use the background properties to set the circles in the background, this is a very common way to place the circles.

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

  • background-color Set the background color
  • background-image Set a background-image
  • background-repeat Sets if a background image will be repeated along the horizontal and vertical axes, or not repeated at all.
  • background-position Sets the starting position of a background image. More information
  • Also you can use the background-size to specifies the size of the background image

  Note: The background property is a shorthand to all the properties mentioned above but for now it is better to understand them separately. In this case if you want to have both circles, just separate in each property the values for each one by a comma url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg); .

  The background-position worked for me with vw (viewport width) and vh (viewport height) units, but you can use percentage, it's just a matter of trial and error to place them as in the design.

  In your case you should modify the position to locate it as in the design

  References: CSS background Property | Background property Background-repeat (MDN)

  Good Job and happy coding !

  Marked as helpful

  2