Background Design Tools

The Background toolbar allow you to define the background of your ad. Note that multiple backgrounds can be included in a single ad, whether the ad swaps backgrounds on interaction (Image -> Secondary Image) or layers files (Image over Video).

There are three backgrounds types available.

Standard

A static background capable of displaying image or video files.

    • Image (State 1): Accepts JPG, PNG, or GIF files. Note that we recommend matching the dimensions of your image to the size of the ad.
    • Image (State 2): Certain templates such as Split swap background images upon interaction (search, about, image gallery, etc.). This secondary image is then displayed.
    • Video: We offer support for two types of background video files.
      • MP4: Short length (2-5 seconds) video file that loops. 
      • Streamed: Longer length (5-25 seconds) video file that plays once and freezes on the last frame. This file is streamed from the MediaKoi CDN and is a Premium service. 
    • No JS Background: This image automatically displays if the ad is displayed in an environment that does not allow JavaScript and prevents the HTML ad from running properly. This function is also available in most ad servers and therefore its inclusion here is a backup function.

Drift

A motion background, allowing for up to three layers, two of which can be set to move.

    • Image (State 1): Accepts JPG, PNG, or GIF files. Note that we recommend matching the dimensions of your image to the size of the ad.
    • Image (State 2): Certain templates such as Split swap background images upon interaction (search, about, image gallery, etc.). This secondary image is then displayed.
    • Image (Drift):  This allows you to animate an image layer beneath Image (State 1 or 2). Accepts JPG, PNG, or GIF files. Note that we recommend matching the dimension of one side of your image to the size of the ad (if Direction is set to Horizontal, match the vertical size or the ad, and vice versa).
      • Direction: Set the direction of animation. This can be defined as horizontal or vertical.
      • Easing: Set the type of movement for the image, wherether moving back and forth (Swing or Linear) or a Loop.
      • Duration (ms): The time that it takes to complete the movement in milliseconds.
    • Image 2 (Drift): This allows you to animate an image layer beneath Image (Drift). Accepts JPG, PNG, or GIF files. Note that we recommend matching the dimension of one side of your image to the size of the ad (if Direction is set to Horizontal, match the vertical size or the ad, and vice versa).

Slides

An animated background, allowing for transitions between multiple images.

    • Image (State 1): Accepts JPG, PNG, or GIF files. Note that we recommend matching the dimensions of your image to the size of the ad.
    • Image (State 2): Certain templates such as Split swap background images upon interaction (search, about, image gallery, etc.). This secondary image is then displayed.
    • Animation Settings: Define the animation of the Gallery Images.
      • Transition:  Set the type of animated transition that will occur between Gallery Images.
      • Direction: Set the direction of animation. This can be defined as horizontal or vertical.
      • Duration (ms): The time that it takes to complete the transition from image to image, in milliseconds.
      • Delay (ms): The time that each image is visible, in milliseconds, before the transition to the next image starts.
    • Gallery Images: Accepts JPG, PNG, or GIF files. Up to five images can be uploaded for animation. Note that we recommend matching the dimensions of your image to the size of the ad.