Backgrounds

Sometimes you want your Three.js scene to be the background of your webpage — a 3D animation that lives behind your content, like a hero section with a spinning 3D logo behind the text.

Making a Three.js scene behave as a background is surprisingly simple. It's just CSS.

method 1: CSS position fixed (easiest)

Set the canvas to position: fixed and give it a negative z-index so it sits behind everything else:

canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

That's it. Your 3D scene now fills the entire viewport behind your page content. Your headings, paragraphs, and buttons sit on top of it like normal.

Good for: Hero sections, animated backgrounds, portfolios.

Not good for: Complex pages where the 3D code might conflict with other JavaScript.

method 2: using an iframe

If your page has complex JavaScript (animations, libraries, frameworks) and you're worried about conflicts, you can isolate your Three.js scene in an iframe. The 3D code runs in its own separate document and won't interfere with anything.

<iframe id="background" src="responsive.html"> Your content goes here. </iframe>

#background {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    border: none;
    pointer-events: none; /* so clicks pass through to your content */
}

The pointer-events: none is important — it makes sure clicks on the iframe pass through to the page content underneath, so users can still interact with your buttons and links.

Good for: Complex pages, when you want total isolation.

Not great for: Simple pages (it adds unnecessary complexity).

which method should you use?

Situation	CSS fixed	iframe
Quick animated background	✅ Yes
No other JavaScript conflicts	✅ Yes
Complex page with lots of other scripts		✅ Yes
You want to keep 3D code completely separate		✅ Yes
Just getting started / prototyping	✅ Yes

For most cases, the CSS approach is all you need.