Submitted almost 4 years ago

Stats Preview Card with Flexbox

Zaid•225

@ZaidMarrie

A solution to the Stats preview card component challenge

Solution retrospective

I have been having difficulty with controlling images and I was unable to get the image to fill its parent container without a min-width. If there is another I could accomplish simple or better results please let me know. Feedback is always much appreciated.

Code

Please log in to post a comment

Community feedback

Ayoub1Dev•195

@Ayoub1dev

Posted almost 4 years ago

HTML

<div class="img"></div>

CSS

.img {
    grid-area: img;
    background: url(/images/image-header-mobile.jpg);
    background-color: var(--img-1-color);

    background-blend-mode: overlay;
    background-repeat: no-repeat;
    background-size: cover;
}

Marked as helpful

Ayoub1Dev•195
@Ayoub1dev
Posted almost 4 years ago
I did not use an img tag in HTML, I just set the background image of the container div. Check out my code for insight!!
Marked as helpful

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