Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats preview card component

@Impodays

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Completed "Stats preview card component". I have few problems,

*I couldn't figure out how to apply the image overlay to looks exactly same as initial design? *I want to know in these type of designs, should I use header image in html or should I use the header image as a background in CSS ?

I used image as "main-img" container background in CSS as I can change easily the image background for different sizes within CSS.

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Hello Kalhara, congratulations for your new solution!

Answering your question:

To make your hero image have the same look and the color purple overlay, you need to use mix-blend-mode using the multiply one.The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

Here’s how you can add this to your img selector: img { mix-blend-mode: multiply; opacity: 84%;}

Here's a good article explaining these effects with mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

✌️ I hope this helps you and happy coding!

1

@Impodays

Posted

@correlucas what is the best way to add image? add as a background in css file or add image in html file ?

0
Lucas 👾 104,420

@correlucas

Posted

@Impodays if the image it's just to decorate the page you can use it as background in the css, but if is something important like a product or anything related for a brand it's better img/picture because it's lmore likely to be found in search mechanism and also improve the SEO.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord