Parallax for full-width image object that's not in background

Beaver Builder
1

I’m trying to figure out if there’s a way to apply a parallax effect to a photo that is not the row background.

I know how to set a row to parallax and assign an associated photo so that elements below it on a page slide up over it on scroll. That works fine when the photo is just a background, and other elements like text are placed on top of it. However, I haven’t been able to figure out how to use that with a background image that has critical text burnt into it, such as the image at the top of http://tacticalinstitute.com, because some of the the bitmapped text gets cut off on smaller displays. Is there a way to force a parallax photo background to display the full image on all devices?

The text’s style and positioning are integral to the background, so separating them into foreground/background objects doesn’t really help. I’ve tried setting the row for parallax without a background image, and placing the graphic over it as a foreground image… but it doesn’t scroll.

Is there some way of accomplishing what I’m envisioning?

Thanks!

2

Hey Teresa,

If you want the Parallax background to display the entire image, you can set it as a static photo background or photo content like what you’re doing now. The main purpose of Parallax is for the background image to scroll together with the page. To achieve that, we’re setting the background attachment to fixed and once that is done, the background image will be sized relative to the window, not the element it is contained in, so some parts of the image will be hidden under other elements.

Hope this helps! :slight_smile:

Ben