Security

Hello,

i am trying to get a java script animation running in the background of a guest registration page. The problem i got now, is that this animation (which is running in a canvas) is running in the foreground, so i can't use the text boxes and buttons on the registration form...

Is there any way to 'send' this canvas in the background? I am using Galleria Skin. The following code is placed in Gallerias 'Background and Image Settings':

{literal}
<style>
canvas {
  position: absolute;
  top:0;
  left:0;
}
</style>

<div id="particles-js">
  
<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%">

<script src="public/js/particles.js"></script>
<script src="public/js/app.js"></script>

</canvas></div>

{/literal}

Does someone have an idea how to get the login form into the foreground? :)

Thank you,

Niko

is nobody having any idea? :(

I'm fairly certain canvas does not have a concept of z-index?

Have you tried placing the CSS in the HEADER of Galleria?

And as a sanity test, try using a "Custom Skin 1" with mode set to Blank, so you don't also have any interference with the Galleria scripting/styling?

Check out this codepen for a reference:

https://codepen.io/creotip/pen/jEWGQM

---

@hdehal wrote:

I'm fairly certain canvas does not have a concept of z-index?

 

---

Me too. But if i use "position: absolute;", doesnt this work in like a z-index?

---

@hdehal wrote:
Have you tried placing the CSS in the HEADER of Galleria?

 

---

Yes, i have... Same result.

---

@hdehal wrote:
And as a sanity test, try using a "Custom Skin 1" with mode set to Blank, so you don't also have any interference with the Galleria scripting/styling?

 

---

Did not work either...

---

@hdehal wrote:
Check out this codepen for a reference:

https://codepen.io/creotip/pen/jEWGQM

 

---

Thanks for this code. I think this works because the "position: absolute;" tag is set to h1. So The Header is in the front layer. If you remove the tag and put it on the canvas style sheet, you have the same problem:

/* remove canvas default margin */
canvas{
	display:block;
	vertical-align:bottom;
  position: absolute;
  top:0;
  left:0;
}

#particles-js{
	width:100%;
	height:100%;
}

h1{
font-size: 7rem;
/*position: absolute;*
top: 35%;
left: 35%;
color: #FFF;
font-family: teko;
font-weight: 400;
text-shadow: 5px 5px #5F6D72;
text-transform: uppercase;
}

But without the absolut tag set in the login form, the animation just works in the header, and does not cover the whole background: