Get canvas with ThreeJS behind al the DOM-elements

Hello guys,
How do i position the canvas that it is behind the div elements, so i can use threejs in the background? i’ve tried z-index but without success :frowning: As u can see in the picture the lighthelper (for demo purposes) shows in front of the div element.
Kind regards!

Without seeing the code of your website its not possible to provide help. It’s best if you demonstrate the issue with a live example: Edit fiddle - JSFiddle - Code Playground

If you make sure that your canvas element is the first child of your body you probably don’t need to play around with the z-index values of your elements.

Something like this:

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        <!-- Canvas first -->
        <canvas id="canvas"></canvas>
        
        <!-- Other stuff -->
        <div>
            ...
        </div>

        <div>
            ...
        </div>
    </body>
</html>
...
#canvas {
    position: fixed;
    top: 0;
    left: 0;
}
...
...
const canvas = document.getElementById('canvas');

const renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
...