Resposive Profile Card

Community feedback

• 

  Rajaul Islam Ratul•1,250

  @ratul0407Posted about 1 year ago

  @AssadullahADELYAR congratulations on completing this challenge 🎉🎉

  This is great but I think you should consider changing some things:

  • You don't need to have two div's to set two background-images on your body

  Instead you can do something like this:

  • inside of your body

  body {
  background-image: url(images/bg-pattern-top.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top -40rem left -30rem;
  }
  

  • And the same goes for the bg-pattern-bottom. By doing this you don't need to use position absolute and this much of syntax in your css and you wouldn't need two extra divs in your html. You can change the background-postion to match it to the design.
  • You can also set multiple background images on your body

  body {
  background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);
  

  and the same for the other background properties. Just use a comma to separate the styling for bottom and top

  I hope it was helpful for you👍👍

  Happy coding my friend🙂🙂

  Marked as helpful

  0

  ---

  

  AssadullahADELYAR•200

  @AssadullahADELYARPosted about 1 year ago

  @ratul0407 Thank you very much for your feedback, first I tried as you mentioned but unfortunately I couldn't positioned then I went for two divs.

  Thank you again, Happy coding

  1

  

  Rajaul Islam Ratul•1,250

  @ratul0407Posted about 1 year ago

  @AssadullahADELYAR here's my solution

  Maybe you can use it as a reference🙂

  I put the background images inside of my body tag and then went with vh, vw

  Marked as helpful

  1