Design comparison
Solution retrospective
Good Evening Team
Finally completed this challenge! It really showed me how rusty I am with CSS. I particularly would like feedback on getting the background image for the <body> tag to show as how the example provided is displayed. I'd also like to know why when I was converting the hero Image file to Jpeg why it only converts to a blue rectangle. Should I have converted the image files to JPEG? Or is there a way to use the image files as is? Whatever other tips you can provide will be greatly appreciated.
Kareem.
Community feedback
- @kenreibmanPosted about 3 years ago
The images are in .svg format and if you correctly link the path to the files it will have no problems displaying on your site. You do not need to convert.
for the illustration-hero, your img source would be
src= ”images/illustration-hero.svg”Learn about positioning background with css to get the background in the right position.
Also in the future, It’s best practice making a separate css file for your styles so your index.html isn’t so cluttered. Stay away from in-line styles.
Marked as helpful0@1reemyPosted about 3 years ago@lmaoken Thank you for the feedback Ken, especially where the image issue is concerned. Next time I'll definitely use a separate style sheet instead of coding in the page itself.
0 - @1reemyPosted about 3 years ago
Ok. So I made some corrections to my solution(thanks again Imaoken), so it now displays the hero image and the background. I also made some corrections to the HTML to improve accessibility and readability.
That being said though, how does one get the background to be displayed as it is in the given design?
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