---
date: 2026-8-18
---

<!-- markdownlint-disable MD001 -->

# Backgrounds

![three.js background](https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/threejs_background.webp)

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:

```css
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.

<div style="font-size: .75rem">HTML</div>

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

<div style="font-size: .75rem">CSS</div>

```css
#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.
