A responsive banner template that allows for elements (such as a logo, CTA or text) to be overlaid on top of a background image. This is useful in cases where the image has not been produced following our safezone recommendations, or for combining static elements to produce a simple responsive banner. Overlay elements will never appear cropped.
Example
Format Specs
Background Image:
JPG or WEBP, 3MB max
Dimensions depend on the format, for desktop formats use a 16:9 aspect ratio (eg 2560x1440px), and for mobile formats a 9:16 aspect ratio (eg 1080x1920px).
Logo / CTA Image:
Up to 1080x1080 (flexible) - SVG, PNG or WEBP with transparent background. 250kb Max.
Both elements are optional, if not required simply don’t upload an image. For best results, export overlay assets without any empty space, and use the settings within the template to set the image position, width and height.
Text Overlay:
Plain text, max 150 chars.
Format description and guidance
Upload your background image and select an appropriate scaling mode. You can change the image position if you would like to change how it is anchored within the banner.
The Vertical and Horizontal offsets allow you to control the amount of space (padding) between your overlays and the top/bottom or left/right edges of the banner.
For each overlay element, you can set a position - this is the position or corner within the banner that the asset will be anchored to. Eg top-left, bottom-right, mid-center etc.
For the Logo and CTA overlays, you can set a width and a height - this determines how big your asset will appear within the banner. For best results use responsive CSS units such as vh or vw to set a value that is proportional to the creative size. It is not always necessary to specify both a width and a height - if you only set one of them, you can set the other to “auto” and have it derive its value from the other automatically.
If using the text overlay, add your text and then choose a Font, Font Size and Text Colour.
Max total file weight:
3.5 MB
Audio
None