Which picture below looks better to you?
Don’t know about you - but the left image looks way more appealing to me.
Isn’t it great when a website looks pixel perfect and reacts responsively to the specific device that you’re using?
A lot of the time, web developers build apps that work on laptops/desktops, but fail to create apps that is equally responsive to other devices (such as mobile, tablets, etc).
This is an issue I struggled with greatly when I first started, as it’s almost impossible to test the dimensions of every single device in the world without any emulator! Thanks to the “Toggle Device Toolbar” in the DevTools panel, we can now test on different device dimensions (and even on devices with different pixel ratios) within the comfort of our own browser.
One main area I’m going to focus on in this article is how to get a fixed background image responsive. Something like the below example website that I build for the Avast x Hack Cambridge 2020 event:
As you can see in the giphys above, the background image remains responsive regardless of the device dimensions. I even made sure that the background image would work on mobile/tablets when set on landscape mode (as auto-rotate is very popular nowadays).
How to do it
1. Get a high-quality image
According to this Wordpress article, the optimum resolution for a background image is around 1920 x 1080 pixels (ratio of 16:9).
2. Set your media queries for different device sizes
This magical link on GitHub made all my device dimension nightmares go away and I’m ever so grateful 🥰.
The best thing about this commit is that it has really helpful comments which clearly annotate which dimensions apply to which devices:
As a little side-note, I’ve noticed that the code snippet doesn’t cover dimensions with a pixel ratio of 2 (most devices that use Retina display).
For this reason, I’ve added in this little bit in the media queries for smartphone devices:
3. Set your rules
Within each media query, we need to set the CSS so that the background image will resize responsively.
As an example, this is the CSS that I’ve put into the media query for desktops of resolution 1281px and higher:
Line 22: set the minimum width of the background image to be the minimum width of the device
Line 23: set height of the image to be 100%
Line 24: set the margin to 0 (top/bottom) and auto (left/right)
Line 25/26: set background-url to desired image, background-repeat to no-repeat, background-attachment to center, background-center to center, and background-position to fixed
Line 27–30: set the background-size to cover (for Safari, Firefox, Opera and Chromium-based browsers)
By setting all of the above within my media query, it means that the background image will not show any white spaces and will not repeat itself, so the user will only see one big image that covers the entire background of the website. In addition to this, by setting background-position to fixed, it adds a cool effect when users scroll down the website.
For each media query, be sure to do the same - don’t forget to readjust the minimum width of the background image for every device range 😊
See the below example:
This screenshot is focused on the media query for mobile and tablet devices that have a min-width of 481px. In this case, we’ll then set the min-width of our background-image to be 481px.
Why did I set the min-height to be 450px, you might ask? Well to be very honest with you, setting min-height to 100% gave me this:
Which looked terrible as the user wouldn’t see what everyone in the background image was looking at! 😳😔
This article helped me to better understand why the image was getting cropped.
The solution that I used was to:
- Look at the dimensions of the image and see what height corresponds to that specific min-width
- set the min-height of the image to be what the corresponding height is
et voilà!
Your background image should now be responsive and hopefully, readjust accordingly to different device sizes. Hurrayyyy! 😍😍
Did you find this article helpful?
YES: please support by giving this article some claps (up to 50 per article)
NO: please share your comments and feedback in the comments below!
