PROFILE CARD USING HTML AND SCSS

Community feedback

• 

  J Z•290

  @half-ctoPosted about 2 years ago

  Hi Ijeoma, congrats on finishing this project!

  I'm not sure what is best practice (and Your take works as well), but I can share mine.

  main {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background-color: #19A1AE;
      background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg);
      background-position: left 50vw top 45vh, right 50vw bottom 45vh;
      background-repeat: no-repeat;
  }
  

  I added both pictures to background and set positions. I like this solution since bg pictures are not interfering with flow of page. Hope this helps!!

  Marked as helpful

  0

  ---

  

  IJEOMA NNAEMEKA PASCAL•280

  @iamdrmekaPosted about 2 years ago

  @half-cto

  Can you help tell me how this positioning works?

  As well as how it affects the two images?

  0

  

  J Z•290

  @half-ctoPosted about 2 years ago

  @iamdrmeka

  You can use background-image: with multiple images seperated by comma and then you can set background-position: for each image.

  background-position: right 50vw bottom 45vh, left 50vw top 45vh;

  this positions img1 50vw units from right side and 45vh from bottom, img2 50vw from left and 45vh from top. but you can use any css units for this positioning bacground-position

  Since both pictures are set as background they don't interfere with other elements. Hope this clears it up, but let me know if you want some more clarification. Also here is link to my solution

  Marked as helpful

  2