Stats preview card component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Jax, could you use background-size: cover with width and height set to 100% and then set the responsive width and height that you want in a parent container (as in, the div with the background image would be contained within an image container)?

  You can also try a picture element instead of background image, since you can include images of different sizes along with the media query you want them shown at:

  <picture>
      <source media="(min-width: 960px)" srcset="image-desktop.png" />
      <img src="image-mobile.png" alt="perfume bottle" />
  </picture>
  

  Hope this helps!

  Marked as helpful

  2
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Jax, congratulations for you new solution.

  I agree with 100% of the things my friend Elaine said. In addition you can also match the exact overlay effect for this challenge using mix-blend-mode.

  Here's how, see the code below:

  Img {
  Mix-blend-mode:multiply;
  Opacity: .8;
  }
  

  If you want too boost the page loading you can use the tool called minify to reduce the css sheet, there's also a plugin im VScode thst does this work.

  Hope it helps, happy coding. 👏

  Marked as helpful

  1