New Overlays background image Fill option

When using Overlays, you may often want to preserve the height and width ratio of your background images across a diverse landscape of devices, viewports, and orientations, all while ensuring the entirety of the viewable overlay’s background shows the chosen image.

To this end, we have released a new Background Image option, Fill. Fill will preserve the image aspect ratio, while ensuring the entirety of the overlay’s background is filled with the chosen image. This new option complements our other background options, but given it’s utility, will be the new default.

The following options are available when you have selected the option to display your image “Behind other content”:

  • Fit – Resizes the image to fit inside the overlay, maintaining the image’s aspect ratio. Will cause letterboxing (background color to appear) above or beside the image if it does not match the overlay’s aspect ratio.
  • Fill – Resizes the image to fit the width or height of the overlay-matching whichever side of the image is short of the overlay’s aspect ratio-so that there is no letterboxing and may be some cropping.
  • Tile – Orients the image at the top-left of the overlay. Repeats image if it is smaller than the overlay. Maintain’s the image’s original size and aspect ratio.
  • Center – Preserves image’s original size and aspect ratio. Cropping will occur if the image is larger than the overlay.

For more information, see our Overlays documentation.