The composition of the image is important.
Trying to explain responsive behavior is hard, but the thing most people miss is that in responsive designs using full screen backgrounds, we are not concerned about the entire image being shown at all times. As a designer we want the subject matter to be visible at all times, but we accept some cropping. it’s a concept that is not new in responsive design. You simply can’t have a background image cover the entire viewport for all screen shapes without some “overflow:hidden” style cropping.
But through clever image composition you can ensure that you subject matter looks good across various screen sizes.
Here’s an example:
Card Designer uses this same technique and helps show the concept quite well. Imagine these are all different screen sizes. Notice the composition of the cards allows them to be meaningful at different sizes.
One nice thing about Card Designer is that you get some control over the image composition inside Blocs. Using this technique for a full screen background requires you to use an image editor as needed to adjust the composition of your image.
Notice that the hero in Blocs using the technique will loose focus on the mountain top at certain screen widths because the mountain is so far to the left (image composition). Card Designer lets you justify the background to compensate for this. The result is a background image that let’s but keep the mountain top in view. So picking the right image with the right composition is important.
Hopefully this helps someone understand this important concept.