×

How do I create a fixed background?

With InVision it's possible to create a scrolling effect with a fixed background.

Note: Within the InVision web app, fixed backgrounds are available for web prototypes only. However, if using InVision Studio, you can create a fixed background for any prototype. 

InVision web app

To create a fixed background for a web prototype in the InVision app:

  1. Navigate to your prototype.
  2. Select Build Mode.
  3. At the bottom of the window, click the configuration icon (Image_2018-07-09_at_1.26.21_PM.png).
  4. Under Background, click Upload New.
  5. Click the fixed icon (fixed_icon.png).

When you return to Preview Mode, notice that as you scroll, the background remains fixed.

Be sure to save your changes. For a visual example, check out this InVision prototype and this screenshot.

Studio

To create a fixed background for any prototype in Studio:

  1. Open your Studio file, and select the desired artboard.
  2. From the Inspector, click the drop-down next to Scrolling, and select Vertical.
  3. In the Inspector next to Background, click the button.
  4. Click the background thumbnail, and choose the image fill icon (image_fill_icon.png).
  5. Drop or paste your image, or select an image from your computer.

When you preview the prototype, you should now be able to scroll while the background remains fixed.

studio_fixed_background.gif


Getting Started: Prototype & Screen Management (
)