Page 1 of 1
Animated Background Issues
Posted: Wed Sep 27, 2023 3:34 pm
by MorningLight
Hi!
I want to have an animated background on my page. This animation should be in a full-page layer, but behind two other layers (Header and Footer).The page has also LayoutGrids and CardsContainers and I need to get "parallax" effect of all other controls above this layer.
A good example of what I need can be viewed here:
https://www.cifraextrema.com/oasys
The problem: I neither get success in making my layer "full page" nor static on the page (it scrolls together with all other controls). I saw some videos in YouTube but since they use previous old versions (11, 12, and 15), and even if I reproduce exactly what I see there I cannot make this function.
Could someone help me to solve this problem?
I appreciate it in advance.
Re: Animated Background Issues
Posted: Wed Sep 27, 2023 4:55 pm
by Pablo
Did you set the background to 'fixed'?
Or else:
viewtopic.php?f=10&t=82134
Re: Animated Background Issues
Posted: Wed Sep 27, 2023 5:10 pm
by MorningLight
I don't know where to find this setting Pablo.
I'll make the project available to you using the e-mail for support since it has some client's logo and information (not public).
Thank you for the help
Re: Animated Background Issues
Posted: Wed Sep 27, 2023 5:29 pm
by Pablo
The parallax effect seems to be working correct.
What exactly did you expect to happen?
Re: Animated Background Issues
Posted: Wed Sep 27, 2023 5:33 pm
by MorningLight
I would like to have the animated MP4 as a static background and all other controls appearing in from of it.
Re: Animated Background Issues
Posted: Wed Sep 27, 2023 6:02 pm
by Pablo
To have a video play full screen in the background, you can set it it 'fill entire browser window'.
However, if you use it in combination with flexible layout then you will have to set the z-index to -1 to force it to the background.
For example:
Code: Select all
#MediaPlayer1
{
z-index: -1 !important;
}
Re: Animated Background Issues
Posted: Wed Sep 27, 2023 6:10 pm
by MorningLight
So, what are you saying is to abandon the Layer and put a VIDEO control directly in the page (or within a Layoutgrid) and after that edit the CSS file as shown?
Re: Animated Background Issues
Posted: Wed Sep 27, 2023 7:41 pm
by Pablo
A video can only be fixed if it's not part of the document flow, otherwise rest of the layout will break.
So, if you want the video 'fixed' in the background then it should be added as a separate video, not as a layer.
You do not have the edit the CSS, you can add the code in the Page HTML.
Re: Animated Background Issues
Posted: Wed Sep 27, 2023 7:51 pm
by MorningLight
I guess I understood the point Pablo.
Thank you Pablo, I'll try it a little bit later.
Re: Animated Background Issues
Posted: Wed Sep 27, 2023 10:44 pm
by crispy68
If you simply place the media player in the workspace (not in layer or grid) and check the box to fill entire browser window with 16x9 aspect ratio, auto play, mute audio or use video that already has no audio is better then it will fill the background behind your layers and grids and stay fixed.