Skip to main content

Image Box: Fix Background Image in Place

Fix a background image so it stays in place while users scroll. This article walks you through the steps to set up a fixed background image.

By adjusting the placement and stacking order of an image, you can create a layout where the background image stays fixed even when the page is scrolled.

How to set it up

Step 1: Place the background image

  1. Open the [Add] panel on the left side of the screen.

  2. Drag and drop an [Image] box onto the page.

Step 2: Configure the background image

  1. Select the image box and open the right panel. If the right panel is closed, open it.

  2. In the [Box] tab of the right panel, set the Image box size as follows:
    Width: 100%, Height: 100vh

  3. Hover over [Position] in the upper-left of the screen and select [Fixed].

  4. Set the [Stack Order] to "-1" or lower. This places the background image behind other elements.

  5. Add other elements on top of the background image and lay them out as usual.

Tip: If you can't select [Fixed] for the position

To select [Fixed], the element needs to be placed directly inside the <div> Base layer.

Open the [Layers] panel and check where the element is located. If it isn't directly inside the Base layer, drag and drop the layer to move it.

Step 3: Check that it works

  1. Scroll the page in Live Preview and confirm that the background image stays fixed.

  2. If everything looks good, click the [Publish] button to publish or update your site. That's it — you've created a fixed background image that stays in place when scrolling.

Related Articles
Image Box: Apply Background Effects to Images
Swap images on hover
Image Box
Responsive settings to lock the aspect ratio of an Embed box
Set up a parallax effect that slowly slides images on scroll
Did this answer your question?