Background Design Tools

The Background toolbar allows you to define the visual backdrop of your ad. You can incorporate multiple backgrounds within a single ad, enabling effects like swapping backgrounds on interaction (e.g., transitioning from a primary image to a secondary image) or layering files (e.g., an image over a video).

There are three primary background types available:

Standard

This is a static background that can display either image or video files.

  • Image (State 1): Accepts JPG, PNG, or GIF files. We recommend matching the dimensions of your image to the size of your ad for optimal display.

  • Image (State 2): For certain templates (like "Split"), this secondary image is displayed when the background swaps upon user interaction (e.g., search, "About" section, image gallery).

    Video: We support three types of background video files:

    • Asset: A short (2-5 seconds) video file that loops continuously. For more details, see the Video Formats section.
    • Channel: A live video feed that streams directly into the ad. This can be a live event or a pre-recorded video scheduled to start at a specific day and time. This is a Premium service. For additional details, see the Live Video section.
    • Stream: A longer (5-25 seconds) video file that plays once and then freezes on its last frame. This file is streamed from the MediaKoi CDN and is a Premium service. For more details, see the Video Formats section.

Drift

This option creates a motion background, allowing for up to three layers, with two of them capable of movement.

  • Image (State 1): Accepts JPG, PNG, or GIF files. We recommend matching the dimensions of your image to the size of your ad.

  • Image (State 2): For certain templates (like "Split"), this secondary image is displayed when the background swaps upon user interaction (e.g., search, "About" section, image gallery).

    Image (Drift): This layer allows you to animate an image beneath your primary Image (State 1 or 2). Accepts JPG, PNG, or GIF files. We recommend matching one dimension of your image to the ad's size (e.g., if the Direction is horizontal, match the vertical size of the ad, and vice versa).

    • Direction: Set the direction of the animation (horizontal or vertical).
    • Easing: Define the type of movement for the image, choosing between continuous motion (Loop) or back-and-forth movement (Swing or Linear).
    • Duration (ms): The time, in milliseconds, it takes for the movement to complete one cycle.
  • Image 2 (Drift): This allows you to animate an additional image layer beneath "Image (Drift)." Accepts JPG, PNG, or GIF files. Similar to "Image (Drift)," we recommend matching one dimension of your image to the ad's size.

Slides

This background type creates an animated effect, enabling transitions between multiple images.

  • Image (State 1): Accepts JPG, PNG, or GIF files. We recommend matching the dimensions of your image to the size of your ad. This image will appear above the gallery images.

  • Image (State 2): For certain templates (like "Split"), this secondary image is displayed when the background swaps upon user interaction (e.g., search, "About" section, image gallery). This image will appear above the gallery images.

    Animation Settings: Define how your gallery images animate.

    • Transition: Select the type of animated transition that occurs between each gallery image.
    • Direction: Set the direction of the animation (horizontal or vertical).
    • Duration (ms): The time, in milliseconds, it takes for one image transition to complete.
    • Delay (ms): The time, in milliseconds, each image remains visible before transitioning to the next.
  • Gallery Images: Accepts JPG, PNG, or GIF files. You can upload up to eight images for this animation. We recommend matching the dimensions of your images to the size of your ad.