how do i add background colour over the image?
how would i make the image appear on top in mobile design?
how do i add background colour over the image?
how would i make the image appear on top in mobile design?
Hello there! Nice Job! To add a color over the image ou can add a layer with some opacity with before. You only have to put the position relative in the container of the image then you can add this layer. Below the is what i used in my solution. Hope it would help.
.image-wrapper {
position: relative;
grid-area: image;
min-height: 240px;
background-image: url(../images/image-header-mobile.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.image-wrapper::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: (the color you want) ;
opacity: 55%;
z-index: 1;
filter: brightness(90%);
}
Hey man nice Job! If i may give you a sugestion you could put the css propertie, 'background color' where you put your background image, with the color -- hsl(225, 100%, 94%) -- to look more like the design and to show the bottom part of your card.
It was hard for me but I think i made it. Waiting feedbacks :)
I couldn't make the mobile design :/, but I accept sugestions for how a can make it.
Nice Job! I think if you use the propertie flex-wrap: wrap; in your flex container it's a start. I take a look only in the developer tool and add it there, of course there another behaviours to treat but it's a start. Hope it would help.