Documentation
Design
Backgrounds
Seamless panoramic backgrounds

Seamless panoramic backgrounds

ButterKit is trusted by thousands of developers worldwide to ship to all 50 App Store languages. Learn more

ButterKit allows a single background image to be applied seamlessly across multiple artboards, creating a polished and professional look for your app. And it’s very easy to do in any design tool or even with something like Claude Design or Figma Make.

An example of panoramic backgrounds applied in the ButterKit application

Example: a panoramic background applied to multiple artboards in ButterKit

Create wide background image

An example of panoramic background image design - a single image is sliced automatically

ButterKit slices the background image for you

Download Template

To work as expected, it should be as wide as the total of your artboards. For example:

PresetRecommended Size
iPhone 6.9" for App Store12900 x 2796
iPhone 6.5" for App Store12420 x 2688
iPad for App Store20480 x 2732
Mac for App Store28800 x 1800
Apple Vision Pro for App Store38400 x 2160
Google Play Store10800 x 1920

Select your artboards

In the Artboard navigator, select all artboards (within a grouping e.g. iPhone 6.9" for App Store) by holding Shift.

Apply the background image

An example showing where in ButterKit UI to apply panoramic backgrounds

1. Select all artboards and apply the single background image; ButterKit handles the rest

Open the Background inspector and apply the large image to all artboards at once. ButterKit automatically handles the math, cropping, and compositing for you.

Note: ButterKit applies the effect left-to-right, so if your background image is larger than the amount of artboards, the effect will start left-most.

Voilà!

It’s that easy. ButterKit does the heavy lifting for you. Share your screenshots and app launch on the ButterKit Discord or subreddit for feedback and support from fellow builders/designers/devs.

Quick Help