Design comparison
Solution retrospective
I have a trouble with adding to my code responsive background for the desktop. I've tried a few things, but just can't position it well.
Little help would be much appreciated. Thanks!
Community feedback
- @r2yoPosted about 2 years ago
hi Kulek, good work!
the problem is you add a image as background-image in the body , that means it will stretch with body's width, my solution is you can add an img tag inside the body but not in your container then add these styles into your img tag:
display: block; position: absolute; z-index: -1; top: 0; width: 100%;
Marked as helpful0 - @kkulekPosted about 2 years ago
Hey r2, thanks for the feedback.
You're right - background-image in the <body> wasn't great idea.
I tried your suggestion but didn't quite understand what you meant.
I just added <main> tag in HTML and in style.css changed body to main (to transfer all styles into a proper tag: <main>).
Now the background-image is responsive and I'm happy with this challenge.
Sure, I could work on this more, but at the beginning of my training, I think it is better to work on the next challenge.
Peace!
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