Static video background when scrolling - parallax?

[daneruef]

I would like to have videos playing in background sections, which I have figured out easily (the new options in Pro are awesome).

But I would like these videos to be static, as in when you scroll over them the content scrolls up but the video stays put, until the next section comes up and replaces the static video background with another static video background.

Similar to what this user is talking about, but with video instead of image backgrounds: https://theme.co/apex/forum/t/static-background-images-when-scrolling-parallax-related/13054

I hope this makes sense, thanks in advance for your help!

[Alaa]

Hi @daneruef

This isn’t how it was developed/designed by default, so such modification might not be supported in the theme, as a starting point, you might add this CSS code to (Theme Options > CSS):

.x-video.player.bg {
    position: fixed;
}

As this is all custom development, regretfully we wont be able to assist further. Custom development is outside the scope of our support. We are happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation. And moreover, this solution may not work after several updates especially if the themes structure changed or overridden.

Thanks.

[daneruef]

Thanks for your reply and help!

I understand that static video backgrounds is not supported. Are static image backgrounds supported? I tried inserting an inline css: background-attachment: fixed; but this doesn’t seem to work. Then I tried this in global and it still didn’t work:

.x-section {
background-attachment: fixed;
}

Last I tried these instructions: https://theme.co/apex/forum/t/best-practice-for-static-background/20912/2

Which said to apply the .fixed-bg class and this code:

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

This also did not work. Any help is much appreciated!

[Alaa]

Hi,

You can edit the section that you want to have a fixed background image at, then add this CSS code in the element CSS as in this screenshot:

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

Thanks.

[daneruef]

Thanks for the reply and your help.

That did not work for me, but this did:

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

On every browser except Safari! Tried using private windows in Safari and the image doesn’t stay fixed all the way down the page… Firefox, Chrome, Edge, even Opera - all work just fine. Any advice on what to do, how this could be happening?

[Alaa]

Hi @daneruef

In this case, we will need to check the exact page URL showing this issue to help you further.

Thanks.

[daneruef]

I sent the link securely. Hopefully this helps…

Let me know if you can’t see the URL

[christian]

Hey @daneruef,

Fixed position elements does not play well in Safari. I’ve actually helped another user using the same technique but I didn’t know that this had an effect in Safari. Regretfully, we could not continue to make this work moreover that this is not a native part of the theme. With that said also, we could not post this in our issue tracker for our developers to troubleshoot. I’ve seen a similar feature request in our list so I’ll this thread to it. Just note that this is not a guarantee that feature requests will actually be added. Our development team is prioritizing based on user demand.

I’d recommend that you consult with a third party developer to continue with this.

Thank you for understanding.