profile-card-component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Mahdi, congratulations for your new solution!

  You can add this two circles as a background, adding it to the body with two keys properties, background-image and background-position, note that the comma inside each properties declare the single modification for each circle separated.

  Note that your circles are not visible because you've add a background-color also to the main and this is overwriting the circles:

  main {
      /* background-color: var(--dark-cyan); */
      isolation: isolate;
  }
  
  body {
      background-repeat: no-repeat, no-repeat;
      background-position: top -500px left -400px, bottom -700px right -250px;
      min-height: 100vh;
      background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
      background-color: var(--dark-cyan);
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Mahdi Rezaei•500

  @MahdiSohailyPosted about 2 years ago

  @correlucas Thank you for your feedback, I know that using the pseudo-classes here is not appropriate, but as I had problem positioning images I copied that from someone else code. I really didn't know if I can position things like this background-position: top -500px left -700px, bottom -500px right -700px;

  it was really helpful, it's people like you that make this community great.

  0

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @MahdiSohaily Hey Mahdi, I applied this code for your solution and worked. The big deal was discover what was hidding the images, that was the background inside the container covering the body properties hahaha Then say me if works bro.

  1

  

  Mahdi Rezaei•500

  @MahdiSohailyPosted about 2 years ago

  @correlucas my solution was working in my local server but not in Github pages. now I applied your solutions in my code it is working perfectly fine. My account is not PRO & and I have used my screenshot attempts so I can not update it here. but it's working in the live server

  1