MORE ABOUT:

In this example, we see an image of MOBLE's office balcony. On the left-hand side are the residential buildings on the Pyrmont Peninsula, and on the right-hand side is the view over the harbour to the Balmain peninsula.

On Desktop, the full width of the image displays, as the image Fit is set to 'Cover' the full width. Though, how will this look on Mobile?

• If the Background Image Position is set to 'Top Left', then on mobile, you will see the residential buildings of the Pyrmont Peninsula on the left of the photo.
  Notice this image is 1440px wide and 960px high, yet the frame has a Fixed Height 700px on desktop. If the image is set to 'Top Left', more of the table in the foreground is cropped. I prefer the Buildings in centre, so I'll chose Centre Left.
  
• If the Background Image Position is set to 'Centre Right', then on mobile, you will see more of the Balmain Peninsula on the right of the Photo.
  

DESIGNER TIPS:

It's obvious to suggest that it's always a good idea to set your Background Image Position by focusing on the part of the image that is most relevant.

However, on many occasions, you will need text on top of the background image. Once you've added text, you can play with the image position to make your text more legible. In this example, the text works perfectly over the table in the foreground. To make the text even more legible:

1. experiment with changing the height and width of the text, using the Width % and the Child Height tools.
2. experiment using a 'Background Overlay' behind the text. It's best practice with try and keep your Background Overlay colours the same across your entire website, though this is down to your particular brand/project.
3. also try with a  'Blur' effect is added to the 'Backdrop Filter', this will naturally create a glassy look, and ensure the text will remain legible should the content team change to a less desirable image in the future.