Profile Card Component - No Background

Community feedback

• 

  3nkywh•80

  @3nkywhPosted over 1 year ago

  @wilbros Hi, Good job!!! Actually can you use two background into you html, although, you must use doubles value in the properties.

  html, body {
  background-image: url("background.jpg"), url("background.jpg")
  background-repeat: no-repeat, no-repeat;
  background-position: right 50vw bottom 50vh, left 50vw top 50vh;
  background-color: red;
  }
  

  Marked as helpful

  1

  ---

  

  Willy M. Beros Jr•120

  @wilbrosPosted over 1 year ago

  @3nkywh thank you. I've discovered something new today with background positioning. In background position property, what does the 50vw and 50vh do? I understand the right, bottom but its the first time I encountered this property.

  I initially did exactly what you suggested except for the 50vw/50vh.

  background: url(./background_top.svg) no-repeat, url(./background_bottom.svg no-repeat;
  background-position: top left, bottom right;
  

  0

  

  3nkywh•80

  @3nkywhPosted over 1 year ago

  @wilbros Basically, it do refer to how much do you want that it be displaced with respect to relative position of background.

  background-position: 0 0;

  This position the background in left-top edge of container. The same applies if you use a second background.

  If you want more info - MDN

  0