Banner: Display the entire image on desktop and mobile

If you're finding that your mobile banner image is cropping out the main subject or possibly if you have a long image that's not displaying the entire image; there is a setting combination that can help. 

Example banner image with the subject to one side instead of the middle:

This image displays fine on desktop but doesn't work well on mobile:

When you use certain height settings and also parallax scrolling, Pipeline keeps the banner height setting but the sides of the image are not shown. The purpose for this is make sure the text is not shrunk and legible on mobile devices. If you shrink the text, it becomes difficult to read and your key messaging maybe missed. 

How to show the entire image:

If you need the entire image to be shown, use this method:

(1) Change the height setting to Image height

(2) Uncheck parallax scrolling. 

When you combine both these, the full image will be shown:

This is ideal for long images on desktop as well. 

Keep in mind that the length on mobile might be much shorter now so there's less space for the text. If the text content is too large for the image, there will be a background color gap:

The other height settings will give you more room for messaging. This method is more for showing the entire image.