I have been playing around on the test site with background images. I wanted to see if I could create a banner at the top of a page. I am using the "Fresh" theme and a 5 area content layout. In the top area I used the "Background Begin Includelet" followed by the "Background End Includelet". In the Begin includelet I used an image created using Canva that measured 1600x542 pixels as a banner feature. I have tried using alternative versions of the same image, but altering the numbers of pixels (length-v-height), but the results always appear similar. I can't see that there's any other way of sizing the image within the includelet (apart from changing the aspect ratios, which don't help either).
If I want an image that covers the whole left-right aspects of a webpage, but not the whole screen from top-bottom aspect when the webpage loads are there any recommended number of pixels in terms of length and height that I should be using for an image and what should I set as the aspect ratio within the incldelet?
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