I am attempting to apply the following background to my site but am getting issues with it fitting the screen; instead, the code creates a new section on my site.
code: Matrix rain animation (codepen.io)
Any ideas what is causing it? I have made the below changes and no luck.
* {margin: 0; padding: 0} body {background: #000;} canvas {display: block;} // Initialising the canvas var canvas = document.getElementById('body'), ctx = canvas.getContext('2d');Hey @Carter_Cunningham!
You won’t be able to add this to the body tag.
I’d suggest adding a custom code embed element and adding:
<canvas> </canvas>
Then add the CSS and JS from the codepen into the page settings.
Here’s a read-only link with a working version: https://preview.webflow.com/preview/matrix-rain-animation?utm_medium=preview_link&utm_source=designer&utm_content=matrix-rain-animation&preview=80594ef577264f99dfe0ca3a9f335582&workflow=preview
Published site: https://matrix-rain-animation.webflow.io/
This won’t work within the Designer, as custom code like this does not render inside the Designer, but does on the published site 
Hi @jonohale!
Thank you for the reply! - I am able to get this far into the code but can not add any text inside the canvas. The canvas itself becomes its own section alone from the rest of my site and does not apply to my other sections. Any idea? Thanks!
You’ll need to add text to elements not in the canvas, then use CSS to position them where you’d like.
Do you have an example of what you’re trying to do?
Hi, I am having the same issue. The code works, but it overrides the text on the page.
This is how it looks published
Here is a link Webflow - Oasis The Agency
