How to control background images set with background-size:cover for different devices? – Html

I think its better to answer your questions in a different order:

a) why the cropping of the image is so drastic in this case?

You do no scaling. You just crop the image.

To get better results, you should trust the displaying device that the full width (landscape) respectively the full height (portrait) is suitable to get a good impression of the image. Here the resolution of the screen is not relevant, as the dpi (dots per inch) are different at almost every device.
So scaling the image to the longer size of the screen bywidth: 100vw; is a first step, but cannot be the last.

c) Is there any sense in asking clients to resize the images in Photoshop since the aspect ratio is still the same after resizing.

The sense of reducing the physical size of photos is to save bandwidth and reduce load time. To avoid the tradeoff of a blurred picture on high-dpi devices (as many mobiles are), you should use your @media decisions to provide images that roughly fit displayed size, preferably not being smaller.

Then the image should be fitted to the viewport by the browser via CSS.

But for production use there are tools out there that resize these pictures by command-line. For a smooth workflow, a customized script should provide the fitting images derived from the master image (that obviously should have the highest resolution). So Photoshop is only the tool to develop the master image. The down-scaling can be done at the server automatically by script.

b) What can be the best done in this case?

Your approach to make decisions via @media is the right direction to walk.

But just taking the first nice picture for the universal background usage is not the right way. You have to face the fact, that you’ve to deal with two extrema of screens:

A long slim smartphone in vertical vs. the smartphone in horizontal display mode.

You also have to realize, these extrema appear not occasionally but frequently as smartphones almost always display in fullscreen mode and do not have the choice of smooth sizing windows like computers. Also the computer user is a quite frequent visitor, too.

As a result, you have to optimize the background for these 3 occasions:

• extreme portrait
• extreme landscape
• almost square

Your possibilities are

• scaling
• cropping
• using different pictures
• using multiple pictures
• Most important: choosing the right picture!

A melange of these possibilities will probably bring the smoothest results.

But there cannot be the one and only solution for all cases. So the decision has to be done fitting to each individual use-case.

An iconic picture that tells you something will preferably be less cropped but more scaled (at least when the bleed space has been cropped).

An background picture that shall give a distinctive ambient but should not tell you something. So a generic skyline might be preferable than a individually recognized one (possibly achieved by hiding and cropping). Here the right size of the generic structure is of interest, not the whole picture. So here the cropping would have more weight as it helps to keep the structure in the right display size.

The example picture:

Pictures, that have two focuses as your sample up there (the persons + computer) are difficult as they require the decision, which focus shall win when it comes to cropping.

Might be the solution is to split the picture in advance to get a floating collage over a nice canvas. Finally, the text will always be the 3rd and most important focus and often splits the impression of the background picture. So splitting the image is not necessarily a tradeoff.

But by splitting them you can let the parts drift together having the anchor of each part of the picture at its related edge. — This declares the center of the background image as the bleed, a space that can be omitted and in this case will be covered by the text.

A word about the "bleed":

In print media some extra millimeters are given to the background canvas color/image or an image at the paper’s cutting edges. This prevents a an ugly flashing of a white needle, where the tolerances of the cut have left too much paper.

For the web layout this is the part of the picture, that can vanish without disturbing the intended impression of the picture. Typically these are the edges of the picture, but you also have an overlay of content hiding parts of the picture. So here we have the need of bleed space also in the middle of a background picture, at least if the picture will never be shown in the whole.

Having enough bleed is essential, especially when you try to use one picture for portrait and landscape usage.

Choosing the right picture:

If you have the possibility to choose the picture, always respect the text content as a further focus to the whole scenery.

Categorize the picture (and the customers intent):

• Shall the background picture be a kind of photographic tapestry, giving the total impression a desired ambient, but does not really tell something? Here the bleed is over the whole picture. Essential is only that the displayed parts are large enough to let the basic structures be recognized and the brain can complete it in the mind.
• Shall the background picture be an expression by itself? — So here you have an interaction between the picture and the text. This must fit. You can use the bleed space of the picture to show both in a appropriate manner at the same time. Or you can show the picture first as a whole (perhaps with a headline) to let the brain remember. Then scrolling in the text and hiding possibly essential parts is no issue anymore, as the brain remembers the image by the not covered rudiments and completes it in the mind.

Find the optimum for each relevant screen:

Which screens do you want to respect (make individual @media definitions)?

For each screen get the right crop situation (remember the space for your text content).

Find the right transition path. Where to will the eyes of the person move, if you change the window size and aspect ratio? Ideally the head of the person will have resized and moved almost to the same size and position as the next @media will define, when it comes to the change.

So having here a mathematical dependency between scaling, cropping and positioning is very helpful for a good result. Such dependencies can be expressed within CSS by using variables and calculating their values.

:root {
    /* ... */
    --bg-width: calc((--bg-height * --aspect-ratio-screen) + --bg-crop-width)
    /* ... */
}

style1 {
    background-size: var(--bg-width) var(--bg-height);
/* ... */
}