It has become fashionable to head an article with an edge-to-edge banner photo. I have been thinking about how I might make this work with as little CSS and JavaScript as possible.
The Problem
It is easy to design a mock-up with a landscape picture stretched acrtoss the top. The trick for the person building the page is that you don’t know how wide the viewport will be: your page might be being viewed on anything from a phone with a nominal 320-px-wide display to a desktop screen that is 1920 px wide. Even this broad range omits the 2560-px Apple 30″ display, on the grounds that surely no-one runs web browsers full-screen on such a beast, and tiny screens like my old phone (240 px).
Here is a range of screen sizes. I have given the sizes in CSS units (px), which is the same as pixels for desktop monitors but one-half the actual pixel count on Apple’s Retina displays. To reduce the number of sizes I have only included screens on current Apple devices:
The green rectangle represents a banner photo that is 400px tall, a big dramatic banner with the title of the article or portfolio or whatever superimposed. (The iPhone-sized screen would need a different layout, but we can treat that as a special case.)
The simplest way to do this is to make the banner background be a very wide strip 1920 px or more wide and 400 px tall. All of the image outside of the viewport will be clipped in the usual way. Only the middle is guaranteed to be visible, so a symmetrical, centred composition is required. I have created a simple demostration page to try out the banner at different widths. You can change the width of the first one by varying your window width (if you are viewing it on a desktop or notebook computer).
There are two main problems with this approach. First, you need a very wide image—not an issue it it is commissioned for the banner, but it might make using an image that starts more conventionally cropped difficult. Second, the slice does not narrow down to a decent portrait-style composition.
Responsive Composition
Here is an approach that uses a taller image, closer to the original
proportions, and a couple of extra CSS properties, the well-known
background-position and the less-well-known
magical value cover for background-size.
I have created a test page, Experiment I. It has CSS along these lines:
background-image: url(bg-1920a.jpeg);
background-position: 67% 67%;
background-size: cover;
The special value cover for background-size means that when the page is
wide it scales the image to just as wide as the page and then clips the top
and bottom, and when it is narrower it scales the picture to the height of the
banner area and then clips the sides.
The background-position property is set to 67% 67%. This means that the
point in the picture where his fingers are manipulating the gold leaf appears
at the same relative position (two-thirds across and two-thirds down).
In this case I am aiming to keep this point at one of the rule-of-thirds intersections; for a different image (See Experiment II) one would choose these percentages differently.
Practical?
In practice I would want to combine this technique to substitute smaller image files for smaller screens, not in order to control the layout, but to reduce needlessly consuming download bandwidth. The smallest screen size (corresponding to phones) would probably require a custom backdrop treatment.
Nevertheless this approach could make it possible to have a reasonable
composition at a variety of viewport sizes with only a minimum of custom CSS
properties—those percentage lengths used for background-position—which might
make it possible to use it for images used for blog posts etc., without
requiring CSS code from the editor. It might even be possible to have a crop
UI that lets the editor choose a focus point in the image to save them typing
in numbers.