Start a conversation

Custom Code Snippet: Background Images

Studio 2 doesn't currently natively support background images, but here's a code snippet and process that can help you to create them.

Basics 

Fliplet Studio 2 does not currently support background images as a default feature. This is because it is challenging to create a system that will work well across all (or many) device types.

The method to implement background images is currently complex because referencing images within a mobile app is different to images for a web app.

If you use an HTTP link in the background URL CSS, it won't load if the app is offline and it may slow down the loading time of that screen on the mobile app, so this is not recommended.

The following instructions & code snippet will allow you to embed a background image in your app. You will need to place it in the Screen CSS or Global CSS under the Developer Options panel on your app.


As a Reminder

Due to the variety of available mobile screen sizes and ratios, some screens may not display this image in the same way. This code is optimised for the majority of screens. It is recommended that you use an image wider than the largest width dimension you expect your users to use, and test the most common screen sizes to ensure you're getting a good result.


You can find these dimensions and test various screen sizes by clicking on 'Change Device Preview' in Fliplet Studio 2.

The Process

Step One

From the 'Edit App' page, on your desired screen, create an image component by dragging the image component to the editor area. Configure the image component to display the image you desire as your background image.


Step Two

Open the Developer Options tab and locate your new image component in the code. These are represented by the {{{widget 00000}}} tags.


Step Three

You will add two new divs to the code - the first, 'banner', will contain your background image and define its size. The second, 'banner-content', will contain the current contents of your page.

Once you have created the image component and the divs, you can move the image component's widget code to the 'banner' div. Make sure to also configure the data-height property based on whether or not you have the top menu bar displayed or hidden (see the examples below).

Code Example - With Top Menu Bar

<div class="banner" data-height="calc(100vh - 44px)">
   {{{YOUR IMAGE WIDGET}}}
</div>
<div class="banner-content">
   YOUR CONTENT
</div>

Code Example - Without Top Menu Bar

<div class="banner" data-height="calc(100vh)">
   {{{YOUR IMAGE WIDGET}}}
</div>
<div class="banner-content">
   YOUR CONTENT
</div>
Choose files or drag and drop files
Was this article helpful?
Yes
No
  1. Samantha Boucher

  2. Posted
  3. Updated

Comments

  1. Samantha Boucher

    Staff –

    Updated on November 29th, 2017 to account for the new banner/banner-content classes.