About background image scaling
Your site has to work on all types of screen size - from huge desktops to tiny mobiles.
When using a full-screen background image, this presents a problem: How do you fit an image with its own orientation into a device that might be completely the other way around?
There are two options:
- (OUR METHOD) Keep the original image undistorted (but scaled) to fit the display window, and crop either the top and bottom or left and right sides of the image; or
- (NOT OUR METHOD!) Distort the image (stretch or squash) to fit into the screen shape/size
Whilst the second option keeps all parts of the original image visible on any screen, the distortion (for example 'squashing' a landscape image into a portrait phone view) will most likely be undesired.
Here are examples of the method we choose to use in our themes (clipping) and the distorted method (which we don't use):
Remember that distorted images can be misleading. If the theme distorted your product images according to the device on which your potential customer was viewing your store, it would mean that a user on a desktop would have a very different visual impression of your product from a user on a phone or tablet.
At Clean themes, we opt for the clipped method, because it doesn't affect the quality, and it doesn't distort the image. Do bear in mind: a background image should be just that - a background element. You should not put vital information in your background, key content should be incorporated into the foreground elements of your site.
The following table demonstrates which areas (approximately) of your background images will be clipped by our theme on various sized devices:
Showcase demo store example
We'll take a look at how our Showcase Native demo store looks on different devices.
Tablet, in portrait orientation
Note how the background image will be cropped and resized to fill the space available. It is important that you do not put important wording on the background - as not all devices will see it.
The 'SALE' image always sits in the centre of the screen. The provided Theme Settings enable you to add an image to the homepage, which will always be centered, and will never be cropped off the page.
Different browsers will react differently to a background image that is being resized, there is simply no 'one size fits all' solution. If you have a landscape image, it will always be cropped in a portrait orientated screen, and vice-versa.
For reference, we used a 2000x1333 jpg image for the background on this demo store. We feel that size/ratio provides a good mix of detail. The compression we used resulted in a 300KB image file, which loads pretty quickly these days.