Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

huddle-landing-page-with-single-introductory-section

Tom R. 110

@TomTwig


Design comparison


SolutionDesign

Solution retrospective


What are the best practices to handle different screen sizes when your background image has a specific resolution? I am asking because the transition between desktop and mobile plus higher screen resolutions looking a bit weird. Maybe limit the screen size or background-image: cover?

Community feedback

Lucas 👾 104,440

@correlucas

Posted

Hello Tom, congratulations for you solution! Good work!

I had the same issue with the background that doesn't fit in the screen when I start to stretch the window. The solution I found was to swap between background-size: contain; / background-size: cover; depending of the page width. I also set some media queries for the background and then changed the img files when it becomes mobile.

You can check my code here to understand what I did to keep the background full screen in all instances:

https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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