Support Center

How to Set Up Background Images & Home Screen Images

Last Updated: Aug 18, 2016 07:32AM PDT
Our platform allows for a great deal of customization, especially when it comes to background images. You can assign unique background images to nearly every feature and add animated images to your home screen for a more dynamic user experience. We offer template background images that cater to various industries. You can select from these options or upload custom images that you create.

Note: The iPhone 4/4S section will not appear for newly created apps. The "Phone" section will apply to the iPhone 4/4S by default.

Selecting/Uploading Background Images

1. Navigate to the Design Step and click the Header Background or Screen Background options for both the Home Screen and all Features. 

2. To upload or select a library Header background image for the section you're viewing, click lick the portrait icon to the right of the text. A pop-up window will appear with two features:
  • Under the Library section, you can choose from preset images we provide. 
  • Under the Your Images section, you can upload custom images to use in your app.  
The Background Color is where you will choose the color selected for the Header background. The Image Overlay Opacity scale determines the opacity level of your image over a solid background color. 

3. To upload or select a library Screen background image for the section you're viewing, click the portrait icon to the right of the text. A pop-up window will appear with two features:
  • Under the Library section, you can choose from preset images we provide. 
  • Under the Your Images section, you can upload custom images to use in your app.  
In both of the Library section and the Your Images section, you can also choose the Background Color and the Blur Effect

4. If you want to select preset images, click the pop up menu to browse through various industry options. (Note: You can use any image for any industry, we just categorize them for your convenience.)

5. Once you find an image you like, just click it. The Update button will appear at the top right when you've selected the image, and the image will appear in the preview app after you click Save in the top right of the page.

6. If you want to upload custom images, go to the Your Images section. Here you'll see all images you've selected from the Library or uploaded manually. Before uploading images, please review the second table in our size guidelines article, which lists the optimal dimensions for home screen and tab-specific background images for all three size sections. If you don't follow these guidelines, your background images may appear stretched.

6. There will be an option to Drag Image Here, where you can take any image file from your computer or desktop and drag it directly to the box.

7. There is also the option to click Browse. A pop-up window will appear. Select the image file(s) you want to upload from your computer, then click Choose (or whatever command applies to your operating system).

8. Once uploaded, the images will appear in the Your Images section. You can then choose the image you want to use, and click Update and Save.

9. If you wish to download or delete images from the Your Images section, just select the image(s), then click the appropriate button at the bottom left.

10. Don't forget about the Custom Design section (in the Build section under each feature) where you can personalize the feature's styling and create a unique Header and Screen Background for each feature if you choose. 

6. Once you've finished assigning your background images, you can view your changes in the app after clicking Save and refreshing the Preview App. Design step changes always take effect immediately, as long as your app's source code supports the changes.

Animated Images

Animated images appear atop your home screen background image. You can select various effects that dictate how they appear to the end user. Though animated images are technically full-screen images, you can get creative with by using the Image Transition feature, which allows for your animated images to fade in and out.

To choose the Image Transition effect, see options below. 

Image Transition
  • Manual Swipe: User must manually swipe through animated images.
  • Sliding: Animated images will transition by sliding across the screen.
  • Fade: Animated images will gradually fade into each other.
  • Parallax: An improvement on Sliding, the images will slide across the screen quicker and more seamlessly.
  • Ken Burns: An improvement on Fade, the images will be slowly zoomed in upon before fading out.

Animated Image Sizes
  • iPhone: 640x1136px (750x1334px when optimizing for iPhone 6)
  • Tablet: 1536 x 2048px

Note: Sizing for Parallax and Ken Burns is largely trial & error. For Ken Burns, we suggest starting with larger dimensions than dictated above to ensure the zoom effect works well on each device size. For Parallax, if you plan to include text or important graphics in the images, be sure that content is restricted to the center 640px (in width) of the image—otherwise, that content will be cut off by the effect.

Linked Animated Images

You can link an animated image to a specific feature within the app. This makes the image clickable, leading the user to the selected tab or in-tab item. This is a great way to highlight a key feature within the app.

1. Click the portrait image next to the Animated Images text. Then select images from the preset library or upload your own images. Drag images to one of the five animated images options.

2. Click the button 'Link a Feature" that populates over the animated Images. Some features (like Around Us, Events, Info, etc.) have items, so you can check the box next to the item you wish to link to, or leave the boxes unchecked to link to the main feature. 

3. Once you've made your selection, click the green Select button on the animated image, then click Update and Save. A confirmation message will appear at the top, and you can then close the window.

4. Once linked, the animated image's link icon will say Edit Link. To disable the link, just click the link icon once more, select No Link from the pop up menu, then click Select on the image and then Update and Save.

Unassigning Background & Animated Images

You can remove image assignments at any point and your change will take effect immediately. To unassign a background image, simply choose another image in its place, or click the trash icon to delete the image from your library. To unassign an animated image, hover your cursor over the animated image and click the red X at the top right to remove the screen animated image and click Update and Save. The animated image will have the instructions to "Drag an image here to assign" once more.
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found