Responsive Background Image Best Practices?

[OSTexo]

Hello,

I’ve finalized the wire frames of my site design and am wondering if there is a guide to responsive background images? Perhaps a template and guide to size images ideally to the current resolution set of the most popular mobile, tablet and desktop assets?

Is it best practice to appropriately scale and bracket image assets to the current most popular screen resolution sizes and then allow the images to scale responsively to the remainder of less commonly used resolutions?

Thanks.

[hendon52]

Scalable background images can be a problem for the simple reason that a wide image (for desktops) will have a tendency to scale down quite small on a mobile device - essentially, it will scale to fit the device screen width which would make it much shorter. As standard, Blocs doesn’t scale background images. Instead it resizes the image height to fit the space needed for other content within the bloc. This means that the background image will be cropped widthways on smaller device screens. For this reason, you should choose background images where the important content remains in the centre of the image so it doesn’t get cropped off at different breakpoints.

The other option is to create different images for each breakpoint (manually cropping before adding to the project). You would then use the visibility options in Blocs to make sure that each device variant of the bloc appears only on certain breakpoints.

[PeteSharp]

@Whittfield gave a great summary the other day that may help in how you think about composition with different breakpoints.

Custom sizing background images? Not possible?

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…

[OSTexo]

Hello,

Thank you for the info. I have no problem manually resizing the images for breakpoints, and specifying visibility. That said, does Blocs load all images or does the generated code only specify loading the image associated with the breakpoint?

I’m also wondering if Solis is a good investment to purchase and use along with Blocs so I’d be able to view the most popular screen resolutions on all platforms to be confident that my manual image sizing is correct?

Thanks.