BACKGROUND IMAGE POSITION


Background Image Position allows you to chose the focus point of an image. This is particularly important when considering how your background image might render across all devices.


EXAMPLE:

You have a landscape image of a field of sunflowers. On the left-hand side in the foreground is a prominent sunflower. The full image will display on desktop perfectly, though background image position is perhaps best initially explained when we consider how the image will behave on a mobile phone in portrait position:

  • If the Background Image Position is set to 'Center Left', then on mobile the prominent sunflower will show on the phone (as the prominent sunflower is on the left)
  • If the Background Image Position is set to 'Centre Right', then on mobile the prominent sunflower will not show on the phone (as the prominent sunflower is on the left)


In the same example, the image is 1440px wide and 810px high, yet the height of the row is only 500px on desktop. If the image is set to 'Center Left', the height of the image will be in the 'Centre' and therefore the top and the bottom of the image will appear to be cropped on desktop (i.e. 310px from the top and the bottom of the image will not show).

In the image, the head of the prominent sunflower is positioned towards the top. You can now adjust the vertical position of the image as follows:

  • If the Background Image Position is set to 'Top Left', then the image will fix to the top of the row, and on the head of the prominent sunflower will show.
  • If the Background Image Position is set to 'Bottom Left', then the image will fix to the bottom of the row, and on the stem of the prominent sunflower will show.

TIP:

It is therefore always a good idea to set your Background Image Position by focusing on the part of the image that is most relevant, or, the part that looks the best with text on top of it.

WEBSITES WITH MOBLE | Design Studio: 202, 56 Bowman Street Pyrmont NSW 2009 | © Copyright 2018 MOBLE Pty Ltd | Terms | Privacy