Container Background Images
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, and that the container height is exactly 800px, either through content, or padding. In this case the image displays 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 750px, and so grows slightly to the width of the site layout (in this case 1300px) 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.