Design comparison
Solution retrospective
did this project using flexbox. I couldn't figure out how to put color to the black and white image and when scaling from desktop to mobile, the layout acts quite weirdly. I would be really grateful if someone can have a look at my codes and tell me what I did wrong. Thanks a lot!
Community feedback
- @ohsitePosted about 3 years ago
HI Duyen! Please not that in this challange you have 2 images.
One for the desktop version and second one for the mobile. This fact can tell us that we are going to have to switch between those 2 pics.
You can not do that (without using JavaScript) by putting the img there by using an
<img>tag. What you should do is: create and empty div in your markup code, than set the image as the background of this div by using:background-image: url(the div's url goes here), (color code goes here);Now you have two images set as a background of the same div, first is image by using url, second one is a color, they should be separated by a comma.
Now you are able to use background blend modes to blend those two types of background.
Please also note that having image as a background set using css not putting it into the document by using an
<img>tag allows you to switch desktop/mobile image using media queries.Keep up the good work!
0@Duyen-codesPosted about 3 years ago@ohsite Thank you a lot. I am aware of the two images. At first I also used an div and injected the image as background. I'll try that again. Really appreciate your help!
0 - @MikevPeerenPosted about 3 years ago
Hey @Duyen-codes,
To add color to the image you can do things like:
background-color: #aa5cdb; background-blend-mode: multiply;0@Duyen-codesPosted about 3 years ago@MikevPeeren Hey! Thanks for the feedback! Greatly appreciate it! I tried the code block you suggested, but does not seem to work in my case since my image html is like this:
<body> <div class='main'> <img class='card-img column' src="./images/image-header-mobile.jpg"> <div class='content-wrapper>...</div> </div> </body>0@MikevPeerenPosted about 3 years ago@Duyen-codes My apologies
For this solution you need to load the image from your css instead of using the <img> tag.
Marked as helpful0@Duyen-codesPosted about 3 years ago@MikevPeeren Yeah right. I did that as my first approach to the challenge but then the background image inside the div did seem to change when switching from desktop to mobile version, so I decided to inject the image with img tag inside html. Thank you a lot for your time and feedback! I really appreciate it.
0
Please log in to post a comment
Log in with GitHub
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