Profile card challenge

Community feedback

• 

  Ryan•290

  @RJC26Posted over 2 years ago

  Hey man your having issues with the avatar image because you have placed your card background image as an image in html not a backgorund image in css, so if you delete that from html and add it in your css:

  .container{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(** ADD BACKGROUND IN HER ../EXAMPLE/BACKGROUND.SVG**);
  background-size: contain;
  background-repeat: no-repeat;
  }
  

  This will center the image and add the background image to your card then you need you need to add a margin-top to you image class and adjust it into position, also remove the position: absolute; from your .avatar class!

  As for your body background you should add background-position-x and y for example you will have to play around with the numbers but this will allow you to move them around and into position:

  background-position-x: -350px, 700px;
  background-position-y:-500px, 300px ;
  background-repeat: no-repeat;
  

  This will give it a similar look in desktop version but you will need to adjust it in your media query to look as desired for mobile! also try using outline: 6px solid #fff; instead of border for you image it will look better!

  hope this helps!!!

  Marked as helpful

  1

  ---

  

  Kariman Medhat•170

  @KarimanMedhatPosted over 2 years ago

  @RJC26 Thank you so much of course it was helpful and I'm gonna try it.

  1