Infinity skin guide

Our Infinity skins are available in two formats, depending on how you want to apply the background artwork.

Option 1: Flex image panels

A responsive template made up of three separate panels on the page: a left panel, a right panel and a fixed top banner.

Each panel has its own background image, giving you flexibility to showcase different artwork in each section. This approach allows variation in positioning, anchoring and creative layout across the page.

Option 2: Flow image background

A responsive template which uses one continuous background image spanning the left, right and top banner panels.

This creates an uninterrupted visual experience across the page, offering full control over positioning, colour and style for a cohesive design.

Both cover and contain background sizes control how a background scales inside its container. Here are some differences between the two.

Cover

• Scales the image so that it completely covers the container
• Parts of the image may be cropped to fill the container

Contain

• Scales the image so the entire image is visible inside the container
• The image may not fill the whole space, leaving blank areas around it
• Perfect for overlay graphics such as logos, buttons and pack shots that shouldn’t be cropped

Overlays are graphic layers that sit on top of a background image such as a logo, pack shot or button. They improve the visibility of key elements across different screen sizes as their width, height and position can be easily adjusted independently of the background image.

Overlay guidance

• Overlays should be transparent to enhance the background rather than replace or hide it
• Be sure to export overlays with minimal empty space around them to ensure accurate positioning and scaling

Anchoring fixes images or an element to a specific reference point within its container. When the container changes size (such as when a browser is resized), the anchored element remains in its position while other content adjusts around it.

For example, in ads where images are partially visible or cropped, it’s important to anchor overlays to the bottom left and top right of the panels. This ensures overlays remain correctly positioned relative to the main image.

Positioning and anchoring are essential for maintaining alignment and visibility of key creative elements across all responsive layouts.