Fixed background in prototyping

Ask the community
1

I have searched Google and found a lot of solution that didn’t work for me, so Im asking it again on this forum.

My problem: I have an image background that I want to give a fixed position when scrolling (Bottom layer).

What I tried;

  • Used the fixed postion checkbox. This does not work because it will make it a top layer.
  • Master frame with 2 frames inside. 1 with the content and 1 with the background. Content frame I gave an Overflow Behavior of Vertical scrolling. The master and background have a no scrolling overflow behavior. This does not work either for me. It gives an error icon next to the vertical scrolling option, but does not say why its an error.

Could anybody help me?

5 Likes
2

Does this help? {SOLVED FIRST ACTUALLY}

5 Likes
3

Hi Tim,

Yes this is what I want. However I cant see how it is made. Could you tell me? I cant open the edit and prototype tabs. So I don’t know what settings have been used.

4

Duplicate to your drafts and you will have your own copy.

2 Likes
6

oh, nevermind, figured out how to “duplicate to drafts”

weird location for that… (and it wont let me delete my comment, so im editing it)

7

Did you find a solution? i have the same problem

8

Because Timj didn’t explain it, I’ll explain for future readers:

  1. Create a frame the size of your screen. This is your master.
  2. Create a second frame the size of your screen nested inside the first. This is for your scrolling content. Fill it with overflowing content.
  3. Create a third frame the size of your screen also nested inside the first. This is for your static background. Place a background in it. Make sure the third frame is under the second in the Layer panel.

Next set scrolling behavior for each frame under Prototype settings.

  1. Set Overflow scrolling to No scrolling for the master frame.
  2. Set Overflow scrolling to Vertical for the second frame (content).
  3. Set Overflow scrolling to No scrolling for the third frame (background).

If you have static UI elements that need to remain fixed on top of the scrolling content, just add another frame of content above it in the layers panel and set the overflow scrolling to no scrolling.

23 Likes
9

And here is a file with an example: https://figma.fun/GfJsF7 (and more)

9 Likes