grid, flexbox

Community feedback

• 

  Hadiza•200

  @ThedeezatPosted over 3 years ago

  Hey,

  I just recently tried this challenge and i used position absolute. i got help from @vanzasetia about using background positioning which i think will also be easier for you.

  More information about background positioning, you can try to check this 👉 video

    background-image: 
      url('../images/bg-pattern-top.svg'),
      url('../images/bg-pattern-bottom.svg');
    background-position: top left, bottom right;
  } 
  

  And instead of height: 100%; i think u should use height: 100vh; cause when making an element span the full height of a page it's best to use vh.

  Marked as helpful

  2

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  @Thedeezat 😁Thanks for mentioning me! I really appreciate it! @sym28, you can check the exact way how I positioned the background by checking my GitHub repo, then see the body on my CSS.

  Hope that help! @sym28

  0

  

  Hadiza•200

  @ThedeezatPosted over 3 years ago

  @vanzasetia Thank you. It's really nice to know.

  0

  

  sym28•20

  @sym28Posted over 3 years ago

  @Thedeezat Thanks for the info, much appreciated :)

  0
• 

  Hessler Inampuez•280

  @Fawkes11Posted over 3 years ago

  you can use position relative and absolute as you did, but in the child you can use letf: 50%; transform: tranlateX(-50%); so it will always be in the middle and for the vertical position take half the size of the image, if the image is 100px high then top: -50px;

  Marked as helpful

  1

  ---

  

  sym28•20

  @sym28Posted over 3 years ago

  @Fawkes11 Thanks! Works perfect.

  0
• 

  Shree Harsh•60

  @shreeharsh1141Posted over 3 years ago

  place your bootstrap class card div inside bootstrap container and add a top margin of 15% to card

  0