Stats preview card component - HTML & SCSS

Community feedback

• 

  Tipu Sultan•130

  @T3sultanPosted over 3 years ago

  Awsome

  Marked as helpful

  0
• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 3 years ago

  see the following article on how to make the background responsive, responsive images

  Marked as helpful

  0
• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 3 years ago

  • to get the effects on the image , use background-blend-mode . No need to use the pseudo-element

  .wrapper__container .image {
      background-image: url("/images/image-header-mobile.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      position: relative;
      height: 30vh;
      min-height: 200px;
      max-height: 480px;
      background-color: #aa5cdb;
      background-blend-mode: multiply; // check for a suitable value
      
  }
  

  • on medium devices , the image is not looking good .
  • the desktop display looks good

  Marked as helpful

  0