The exam question: I would like to use an image as the background for this site, I would like it to scale up or down appropriately for the viewport or device looking at it, and I would like it to be static (ie. when the content scrolls, the image remains in place).
- Pure CSS using background-size
Using the background-size and background-attachment properties you can most certainly get a nice full screen image to display. I went with something like the CSS below at first:
background: url(/* SOME IMAGE */) no-repeat center center fixed;
The issue with this approach is that it just doesn’t quite do what I want it to. Does it scale? Yes. Does it scale nicely? Not so much on the iPad mini or iPhone I tested it on, mainly because rather than set the image size based on the viewport, it does so based on the size of the page. The image was scaled for the longest edge of the page, meaning that on a screen of that size the image was mainly lost.
- Pure CSS using media queries
This version of the CSS-only route is nice because it lets me get the image to the size I want based on the user’s viewport. Yes, it means a little work in terms of writing all the media queries into the stylesheet, but it gets the right look when the page loads. The problem this time around was that, on the iPad mini and iPhone at least, the image wasn’t static in the background. It scrolls, even with the background-attachment set to fixed.
Take a look at this handy post on media queries for iPads and iPhones.
I’m sticking with Vegas for now. I’m hoping that the font size I’m using means that pinching isn’t an often used feature when navigating the site.
I’d love to hear your experiences and whether you’ve come across a particularly elegant other solution for this problem! If I can get the Vegas experience minus the UX issues on iOS I’d be over the moon