Can I create a parallax effect like this with photos in X?

[444media]

Is there a way to emulate the parallax settings with images in X like the images on this site: https://www.karliekloss.com/?

The images seem like they are behind an opening in the white background and as one scrolls down they stay stationary and the opening just moves. I believe this is a parallax effect, yes? Is this effect possible with X?

Thanks for your help and info!

-Chris

[friech]

Hi Chris,

Thank you for writing in, yes there is a parallax effect option on the section, row, and columns background more details here.

But the effect used on this site (https://www.karliekloss.com/) is a standard background-attachment: fixed; CSS property.

background-attachment - CSS Reference

You can apply that property on your background-image, by adding the custom CSS below on its container (section/row/column) Element CSS area.

$el .x-bg-layer-lower-image {
	background-attachment: fixed;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

[444media]

Thanks Friech! Very much appreciate your detailed help (as always)!! Have a great day!

-Chris

[marc_a]

@444media,

It’s our pleasure to help you.

Thank you.

[444media]

So I have tried adding the CSS code here to the custom CSS of the image, tried the pages CSS and tried the background’s custom CSS, but none of it seems to be making the image stay in place while the page moves down like on https://www.karliekloss.com/. I do understand, I believe how to place the CSS, but since it’s not working as hoped, (see ch.bluemoonadvisors.com) I’m thinking I did something wrong. I’d like the picture of the blond woman below the fold to appear that it’s staying in place and not scrolling down the page as one scrolls down.

Again, tried placing the provided CSS on 1. the image element itself 2. the entire section CSS and 3. the entire page CSS. I know that it only needs to be one of these but when it wasn’t working, I went on to try each one. They are all still in place.

Thanks for your help!

[friech]

Hi Chris,

I see what the issue, the picture of the blond woman on that page is added as Image element.

The parallax effect and background-attachment: fixed; CSS property only works with background-images (not image element). What you need to do is remove that image element and add that image as the background-image of the Column.

Then you need to add the custom CSS provided above to that Column’s Element CSS area.

Hope it helps,
Cheers!