Hello @karenefereyan welcome back! ;👋 Nice work on this one the solution you put together looks great. Here's some small points you might like to consider:
-
Yes! using the
pictureelement withsrcsetwould be the best option here (in my opinion). This prevents the user having to download an image that they probably won't see. Sometimes the markup for this can get a bit complicated, but this article explains the options well: https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/ -
I think you have the right approach here, I think
background-blend-modeis a good approach here, combined with a backgroundcolorof purple or something - alternatively, you could try setting opacity on the image too, but I think you're approach is better. Another nice article: https://css-tricks.com/almanac/properties/b/background-blend-mode/ -
I saw your image looks a bit squashed. I think that this is because you are setting both
widthandheighton the image, which will fill the space you want, but will distort things. Better to setmax-widthormax-heightat 100% but not both and set the other toauto. If you need to fill the space have a look at usingobject-fitwith acovervalue - this can work nicely.
Hope this helps! Keep up the good work!! 🙌 and lets not wait another year for he next solution!! 😜
Cheers 👋
@karenefereyan
Posted
Thanks so much for the feedback. I'll definitely make changes. I thought I fixed the squashed image. I'll update it. And nah, you won't have to wait another year 😂😂😂😂😂😂😂. Keep on coding. Cheers!!!
