Fixed background (banner) images, while scrolling

Hi, I am new to Foundry and have a quick question.

How do fixed background images work? - The ones that get revealed and get covered up again while scrolling down a site. It’s part of the Mead Theme and I have also ssen it in a showecased user website.

If someone could give me a quick pointer into the right direction - I’d be most grateful.


@Markus Use the Jumbotron stack and set the backdrop to an image. Then “lock” the image. This will cause the content to scroll but keep the image fixed or locked. Also, do not place it in a container stack. This will allow the background to span the width of the web page. Hope that helps. Let us know if you need any more help.

1 Like

Perfect. Thank you so much!

1 Like

One more question regarding this topic of full screen background images.

I can easily get a full screen image to fill the screen from left to right. But if I just use the image as a locked background, I don’t seem to have control over the height of the displayed background. All I am getting is a thin slice that only shows a small vertical portion of the actual image. Is there a simple way to make it larger vertically?

Thanks in advance!

The locked background image feature has to make sure there is something for the page to scroll over. The image gets sized up to fill the entirety of the browser window so that as the visitor scrolls and rest of the page’s content moves around it can appear as though it is sliding over the background image. Hopefully this makes sense since this is a pre-coffee explanation. :stuck_out_tongue:

If you’re seeing a different behavior you think, post a live URL here and I’ll take a look, but from what you’re describing this is how it is supposed to work.

Now that I’m thinking on it (see brain works slower without coffee) you might be asking why the Jumbotron is not taller. This is because you have no content in it. Add some content to it and you’ll see it expand. The Jumbotron is made to have content within it. You can also use the Banner stack instead. This allows you to set fixed heights without having any content in it and it too can achieve the Locked Background look.

Thanks, Adam. It all makes sense now. When I hear Banner I usually think of a landscape-style wide image at the top of a page and with “Jumbotron” I see a big, large 4:3 rectangle in a sports stadium. Still, it makes sense the way you have set it up and once I know, it’s easy to work with it. Thanks again!