Documentation
Design
Backgrounds
Seamless panoramic backgrounds

Seamless panoramic backgrounds

ButterKit is used 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 all your artboards combined (one artboard’s width times the number of artboards) at the same height. The sizes below assume 10 artboards, the App Store maximum. For 6 artboards using iPhone for App Store (Medium), make it 7236 x 2622.

PresetSize for 10 artboards
iPhone for App Store (Medium), the default12060 x 2622
iPhone for App Store (Large)12900 x 2796
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

Start with the Medium iPhone preset. It matches App Store Connect’s required iPhone with Dynamic Island (medium display) slot, which covers 6.1" and 6.3" iPhones. The Large preset matches the optional iPhone with Dynamic Island (large display) slot for 6.5", 6.7", and 6.9" iPhones. If you skip Large, App Store Connect reuses your Medium screenshots there.

Select your artboards

In the Artboard navigator, hold Shift and select every artboard in one size group, such as iPhone for App Store (Medium).

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