Design comparison
Solution retrospective
Finding it difficult to use the image for desktop version so I used it as background. any help on what I can do?
Community feedback
- @hitmorecodePosted about 1 year ago
You can make use of the picture element inside the html file and you can remove it from the css file.
<picture> <source media="(min-width: ***px)" srcset="images/image-header-desktop.jpg"> <source media="(min-width: ***px)" srcset="images/image-header-mobile.jpg"> <img src="images/image-header-desktop.jpg" alt=""> </picture>
Replace *** with the width which you want a certain image to show.
You used filter to create the overlay. You need to fix it and use
mix-blend-mode: multiply;
andopacity: 0.8;
If this is not clear to you, let me know
Marked as helpful0@FreedteckPosted about 1 year ago@hitmorecode Wow! I never thought of the
picture
. Thanks a lot. I'll try it out0 - @freaky4wrldPosted about 1 year ago
Hey buddy......hope you doing great, here's what I would suggest you to do
- give a ids of mobile and desktop to your images........ now apply the below styles
#mobile{ display: hide; } #desktop{ display: block; some other styles to position the image/height and width etc.... }
- now you can use media queries to assist you for achieving your image switching on reducing the width.......
@media screen and (max-width: mobile-width/any width you want in px){ #mobile{ display: block; other styles that at you want } #desktop{ display: none; }
That will do the work.....hope this helped you, glad to help you buddy!! Keep learning and coding!!!
Marked as helpful0@FreedteckPosted about 1 year ago@freaky4wrld Thanks so much for this. Though I used mobile first, I'll tweak this a little.
0
Please log in to post a comment
Log in with GitHubJoin 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