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

stat preview card component(Not finished need some advice)

@Cookiemonsterhxc

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


How to fit the image how to put overlay background color on image i cant figure out how to remove the bottom space between 10k+ and companies and weird the outcome suddenly change when I upload it to netlify the image suddenly become smaller

Community feedback

P

@hszilvi

Posted

For overlay you can add an overlay div to your image

<div class="right__section"> <img src="/images/image-header-desktop.jpg" alt="image-header-desktop"> <div class="overlay"></div> </div>

css .right__section { position: relative; overflow: hidden; background-size: cover; } .overlay { position: absolute; top: 0; width: 100%; height: 100%; bachground: #550885; opacity: 0.6; }

Marked as helpful

0

@Cookiemonsterhxc

Posted

@hszilvi Thank you

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