Javacript background not fitting whole screen

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: Webflow - Matrix rain animation

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 :slight_smile:

1 Like

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? :slight_smile: