Submitted over 1 year ago

Huddle landing page with single introductory section

Kathleen Jogno• 20

@redKath

Preview site View code

This is a solution for...

Huddle landing page with a single introductory section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

For the background image of the desktop screen size, I used a fixed attachment in the body, is that a good practice? I did it because when the site is zoomed out or zoomed in the background image moves and doesn't cover the entire screen. I also put a background-size: cover. Is that a good practice as well? I'm quite unsure of how to deal with backgrounds, so your feedback would be a huge help. Thank you so much.

Community feedback

Vanza Setia• 27,855

@vanzasetia

Posted over 1 year ago

Hi, Kathleen Jogno! 👋

Regarding the background image, I notice something interesting. When I first visited the site, the FPS (Frames Per Second) gets dropped a bit. But, after I disable the background-attachment: fixed, fixed;, the FPS gets stable again. Based on this experiment, I think fixed background can potentially impact the performance of the website. 😅

For the background-size, I set it to cover too for my solution and it works well. So, I don't see anything wrong with it. 😉

For the background color (#674BB1), you don't need to set any other background properties. It will fill the entire page (simply works well by default). So, I suggest removing the second values on the other background properties.

That's it! I hope this answer your questions!

Please log in to post a comment

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