Use 'Background Image Fit' to make your images responsive. Make your background image span the entire width or height of the frame.

  D03 E02    06:39

Embed v Background Images - Fixed Height

A common query for first timers is knowing when to use an embed image v's a background image. Background Images are most commonly used when you want to apply text on top of an image, here we choose a background image so that a Fixed Height can be applied to your Frame.


It's best practice to treat 'Cover' is the default setting that automatically adjusts your image to stretch across the full width of a Frame.

'Cover' is most frequently used in banners to create a 'full bleed' image that sits nicely in the background. However, you may use this tool in any frame, e.g. in columns, where you would like to show full width background images.


'Contain' is a neat effect that always presents your image at it true dimensions. Therefore, it's bets practice to think of 'Contain' as a way to show the Full height of the image, where 'Cover' will display the full width.


For designers, some alternate use cases to consider are:

  • Overflow effect: Allow your image to flow off the page (or even off the Block) where it is placed.
    E.g. You upload a 1500px image in a left-hand block, if the device screen is less than 1500px, the image will spill over the page to the right.

  • Fixed: Fix a small image behind your text.
    E.g. You may have a small (let's say 200px by 200px) transparent png of a speech bubble that sits behind a customer testimonial. You might position the image Top Left. The speech bubble will be contained in the top left, creating an awesome look behind your customer testimonial.