We regularly get support tickets asking why a background image is cropped or zoomed in. So here’s some information on how background images work to help explain those situations when a background image doesn’t look like you expect it to.

It all starts with the concept of image aspect ratios. This is the relationship between the width and height of an image. So if an image is 1200px by 800px, it has a 3:2 aspect ratio, in that if its length were 3, its height would be 2.

In this document we will look at adding background images to container and then columns.

When you add a background image to a container, this is what happens: Images set as backgrounds on containers span to the height or width of the container while maintaining their aspect ratio; effectively, always filling the container. But containers by themselves have no height at all, so it’s the content (or padding) that determines their height, and the Site Width setting that determines the width (or the screen it’s being viewed on with the 100% width template).

Let’s take a simple example to illustrate. In the diagram below, the image is 1200px wide and 800px high. Let’s also say that the site width has been set to 1200px in the Layout > Site Width option, the page is using the Site Width template, and that the container height is exactly 800px, either through content, or padding. In this case the image would display fully, at its native aspect ratio.

Now if the container height was increased to 1000px, either through content or padding, then the image will now display at 1000px height, and keeping its aspect ratio, 1500px in width. So here the image will be slightly zoomed in, and slightly cropped on both sides.

And here’s a real world example. The container below is completely empty (no column or elements) and has padding set to 200px in height. The image set as a background image is 1200px x 847px, and so grows slightly to the width of the site layout (in this case 1280px) and (on desktop at least) we can only see 200px of its height, in the middle of the image, as this image has a Background Position of Center Center.

But on a mobile device, something else happens. The site goes into responsive mode, and because the width of the device is so much smaller, but the padding of 200px remains, we get an image that is 200px high and at that screen width, we are seeing almost the whole image again. This is just how responsive web design works.

Things are also a little different when you add a background image to a page with the 100% width template. Then, it’s the user’s screen size that comes into play. With a large resolution monitor, for example a 4K monitor, which has a resolution of 3840px x 2160px, then images might have to upscale considerably. It’s always a balance between image file size and pixel size, and so a typical approach is when uploading a container background image on a 100% width template, is to ensure the image is at least 2000px in width, so the upscaling is kept to a minimum.

Here’s a final illustration, showing an example of a container on a page using the 100% width template, on a large monitor. The image displays at the width of the screen resolution (minus any scroll bars etc) and the image will be cropped in height unless the container height equals the images’ native aspect ratio. So for an image with a 3:2 aspect ratio and sized at 2000px, the container height would need to be around 1333px for no cropping to occur. So in most situations, some cropping will occur, and the image will be zoomed in. If your image is very pixellated in a situation like this, it’s because the uploaded background image isn’t large enough to upscale on a large monitor without pixellation.

On the left hand side, the column has simply been resized to 1/2. The full image displays, and is just scaled down to fit the 1/2 dimension. On the right hand side, however, content has been added that pushes the height of the column past where the apsect ratio of the image would make it. And so the height of the image is maintained, while the image is zoomed in on the sides, cropping the image, but keeping the aspect ratio intact.

Hopefully, this article goes some way towards explaining how images work as Container and Column backgrounds. There are a lot of scenarios we haven’t covered here, but the principles are the same. Web design can be complex, but with an understanding of the principles at play around the theme and how it interacts with images, then you can achieve a satisfying result every time.