With Background Image there's no definitive answer to "which bit of the picture will be visible" - because it'll depend on the size of the browser being used. The picture fills the available space and this varies greatly depending on whether it's a wide browser on a desktop or tall and thin on a mobile.

e.g, look at Superhighways and make the browser window wide and narrow and see how this affects the banner image.

The only way to ensure that an entire image is visible is to insert it inline, rather than as Background (e.g., using a media gallery, the wysiwyg editor, custom includelet, etc).

If you want the image to be background (e.g., with content over it) as a design element than you need a suitable photo and might be able to use a bit of custom CSS to tweak how the image is placed into the space.

e.g., look at Refugee Advocacy Forum and see how the group photo shows full people on a narrow screen but only their heads are visible on a wide screen.

In this case the banner size isn't fixed (changes with content), and I gave the includelet the class "background-image" so that I could add the following piece of custom CSS to the theme, so the image was positioned so that heads weren't cropped.

.homepage-image {
  background-position-y: 20% !important;
}

We can look at this on the User Group Chat on Wednesday if that's useful.

Thanks

Joe