Figma Support Forum

Fix Position when scrolling for background

  1. Describe the problem your experiencing and how your idea helps solve this

Background scrolls with other elements. When I set “Fix position when scrolling” it jump upper and overlap other elements.

  1. Goal

Make background static when other elements can be scrolled on top of it.

  1. Solution

Add 3rd tab of scrolling type in the next order:



BACKGROUND or “BACK ELEMENTS” which is fixed but placed under the "SCROLLS’ layers.



Why not just be able to put fixed position elements wherever you want. I don’t understand why they have to always be on top.


I agree that you should just be able to put fixed elements wherever you want in the layer stack. I’m running into an issue like this in my current project where we have a slight gradient in the background that we want to be fixed on scroll, but we also have a top nav bar that content needs to scroll under. I’m aware of the nested frame solution, but it doesn’t really work for this application because the scrolling frame has to have clip contents on, which then hides all of the content further down on the page.



I agree with @Puristi and @Andy5 , I would like to be able to fix objects without having them be on top. I also am trying to fix a background, but this can’t(?) be done without the background covering everything else right now.

EDIT: I found a solution in the thread “Fixed background in prototyping” here on the forum (can’t include link because links are not allowed, search for it to find it)

Here is the link: Fixed background in prototyping - #2 by Timj

1 Like

Quick followup to this. We ended up solving this by making the background gradient into a component, then copying that component into the background of our header bar. In this scenario you can have clip contents for the scrolling frame off, and it will go “under” the header bar without being seen.

A little bit of a hacky solution, but it worked out in the end.