Parallax effect using record details images

I’ve been asked to share how to set up a parallax effect using images from a record on a details page so here it is.

Here’s how the end result looks.

For this example, I have a table that has two images and called them “Image 1” and “Image 2”.

To do this, you’ll need to add the following code to the CSS section of the details page.

.parallax {
  min-height: 500px; 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

Then, add the following code to the source code of an HTML component.
Note: Change the “Image 1” and “Image 2” text to the Names of your image fields

<div class="parallax" style="background-image: url('{!!Image 1.src!!}');">&nbsp;</div>
<div style="height: 500px; background-color: red; font-size: 36px;">Text</div>
<div class="parallax" style="background-image: url('{!!Image 2.src!!}');">&nbsp;</div>
1 Like


That’s a 36MB GIF :exploding_head:

Lol my phone hated that Gif but it looks great! Thanks @Chem!

Before I read everything, I thought the parallax images were being displayed dynamically on a parent page. :bulb::+1:

Just in case someone wants to view it on a 4k screen :rofl:

1 Like