Design comparison
Solution retrospective
Learning how to use background image
and start using rem for font
When it comes to image i don't know how to make it change when get to breakpoint but i discover background image thing so that's it problem solve
What specific areas of your project would you like help with?I don't know why when i deployed my website on GitHub pages the image didn't appear but if i open it locally it appear. If anyone know how to fix please help.
Community feedback
- @AzpenMeadowsPosted 6 months ago
Hello,
I like your solution. Regarding changing image based on breakpoint, I would recommend using the html
<picture></picture>
element. This allows to you set multiple image sources, and it will load the appropriate one based on screen declared width.Regarding your background image not showing when hosted on GitHub pages, the url uses a file path starting at the root directory (i.e. / = root). GitHub seems to handle where root is differently (I am not entirely sure how this works). You can try using a path relative to your css file instead. A quick edit in dev tools got your site working fine for me. See below:
/* your path */ .image { background-image: url("/images/image-product-desktop.jpg"); } /* working path */ .image { background-image: url("../images/image-product-desktop.jpg"); }
I hope this is helpful!
Marked as helpful1 - @luccyyy97Posted 6 months ago
nice work. not really sure why but maybe can try if remove the "/" infront to see if it works.
background-image: url('/images/image-product-mobile.jpg');
to
background-image: url('images/image-product-mobile.jpg');
Marked as helpful1
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