Profile card component [9]

Community feedback

• 

  theCavyDev•510

  @okeke-ugochukwuPosted over 1 year ago

  Hey Dean. Nice job!

  The background is a tricky one, lol, but they are just two circles with a gradient background, creating a fade illusion. So here's how you could go about it.

  Make two circles using divs. With the eye dropper tool (color picker) in the inspector section of your browser devtools, pick the colors for the gradient. The starting color would be the lightest part of the circle, the ending color would be the main background color (thus creating the fade illusion). Then absolutely position the divs (might need to rotate too) until as close as possible to the original design.

  You can as well check out solutions posted by others, to see how they did it. It's just creativity.

  I hope this helps :)

  Marked as helpful

  0
• 

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  Hello @DeanMustafa,

  You can add the two circles using the background-image property on the body.

  • Here's how you do it: On the body tag we use the background-image property to set both the background URLs separated by a , (we can add multiple images as background using ,) like this:

  body{
      background-image: url(1st pattern url), url(2nd patter url);
      background-repeat: no-repeat;
      background-position: -127% -56vh, 200% 56vh;
      background-size: 75%;
  //rest of the styles
     }
  

  • Let me explain what we did here in the code firstly we use as I said earlier set the URLs for the background images by separating the URLs by ,.
  • background-repeat is used so that the background images don't repeat.
  • background-position to change the position of background images. In background-position you might have noticed I have used , here too because to differentiate between the two images and set the positions of those accordingly. To easily explain this it's like (first image position), (second image position). We also have 2 values for each image positions, the 1st one represents the x-axis value and the second one represents the y-axis value.
  • background-size we use to set the size of the circles. You might ask why we didn't use , to separate the background-size as well, that's because we want both the images to have the same exact size which is 75%. Think of it as if we don't use the , and just give the property one value then it would get applied to both images. (, to separate the values of individual images).

  This is the general idea of how you could do it. Try tweaking the background-position values as well as the background-size values to get desired positioning.

  I hope this answered your question.

  Good luck!

  Marked as helpful

  0