Profile Card using Flex box

Community feedback

• 

  Annas Dwi•410

  @anasdwcPosted almost 2 years ago

  Hello @LucasHMelo 👋

  • For background image, you can add some value for positioning your image

  Documentation 📓:

  https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

  • You can add some value to background-position

  Code ⌨️:

  body {
    background-image: url(../../images/bg-pattern-top.svg),
      url(../../images/bg-pattern-bottom.svg);
    background-position: top -380px left -110px, bottom -350px right -150px;
    background-repeat: no-repeat;
    background-size: contain;
  }
  

  • It's better if you use the img HTML syntax instead of using the background-image in CSS. img HTML is also easier to customize.

  Feel free to reach me out 🍻

  0
• 

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  HEY LUCAS!

  Concerning your issue with the background, here is the code that I used for mine, hopefully, it can help you too:

  background-image: url(images/bg-pattern-top.svg),
      url(images/bg-pattern-bottom.svg);
      background-position-x: -100%, 200%;
      background-position-y: 85%, -60%;
      background-repeat: no-repeat, no-repeat;
  

  you will put this inside the body selector

  To put the name near the image, for your .row, a possible solution for this would be to use a negative margin e.g margin-top: -1rem, this will move it up instead of down.

  I see that you also have some accessibility issues, I can help you with that::

  Instead of using a div1 for the .attribution, you should instead use a semantic element like footer`.

  HOPE I COULD BE OF HELP :)

  HAPPY CODING!

  0