Design comparison
Solution retrospective
I seemed to struggle with the project so many times. I couldn't add "background-image: image-header-desktop;" so I resorted to using <img src="image-header-mobile" alt=""> as my image for both mobile and desktop and stretched them out on CSS using max-width, max-height and width and height. I'm sure there's a simpler way to do these things but that was the method that I used
Community feedback
- @godwinoparaPosted about 3 years ago
when you added the image as a background image did you give the container a height and width because i struggle with background images also when i didn't know that height and width are required for them to work, and also probably next time instead you could also use the picture tag like this <picture> <source srcset="put the large image url here" media="(min-width: 800px)"> <img src="put the small image here" alt="" /> </picture> you can also add more screen sizes also check this mdn documentation for better explanation https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
Marked as helpful0@Yahyaabbakar92Posted about 3 years ago@godwinopara Thanks, I think I did try that out but it must've been when I was frustrated and messing about with what works through chrome dev tools. I appreciate the link to the documentation and I'll definitely try it out on some other project or come back and revisit 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