Posted by Joe Oldak on

The size of the Background Image will take either the natural size of whatever is between the Begin and End includelets, or it can be a fixed ratio if you select the appropriate aspect ratio in the settings.

The actual resolution of your source image isn't too important - it's more about what aspect ratio you use, since Voice always scales it down to max 1140 pixels wide anyway.

Here's a few examples of the Background Begin/End includelet in action:

The image at the top of the Superhighways homepage does not have a fixed aspect ratio - you'll see that as you change the browser width the shape of the image changes. In this case it is always just big enough to contain the overlaid text. The raw image was 2456x1381.

(Also on the Superhighways homepage, the blue behind Latest from the Superhighways blog uses Background Image using a colour rather than an image, and no fixed aspect ratio, so that it expands appropriately depending on the content.)

As a counter-example, the image at the top of the Croydon Mencap page is set to have a fixed aspect ratio of 2x1. Although in practice it can go wider than this with a very wide browser, because that's the ratio of the box within the content column, so it's limited to be about 470px high. In this case the raw image was 1920x1080.

So as a general rule, I'd say that if you want the image as a banner then use a fixed aspect ratio of around 2x1, but if you want content over the image then don't.

Alternatively, in the Bootstrap theme you can pick a banner image in the theme options, and there's a setting that makes it go full width, which looks good! :-)

Hopefully this helps!

Joe