How to make the matrix background render behind page content?

user_15669749 0
Viewed 1010

I wanted to use this cool matrix background for my web application but it covers all of my elements(div's, headers, paragraphs etc.).

I've tried to fix this with css but it doesn't work. So now I'm stuck and asking you for help.

Here is my code from CodePen:

const canvas = document.getElementById('canv');
const ctx = canvas.getContext('2d');

const w = canvas.width = document.body.offsetWidth;
const h = canvas.height = document.body.offsetHeight;
const cols = Math.floor(w / 20) + 1;
const ypos = Array(cols).fill(0);

ctx.fillStyle = '#000';
ctx.fillRect(0, 0, w, h);

function matrix () {
  ctx.fillStyle = '#0001';
  ctx.fillRect(0, 0, w, h);

  ctx.fillStyle = '#0f0';
  ctx.font = '15pt monospace';

  ypos.forEach((y, ind) => {
    const text = String.fromCharCode(Math.random() * 128);
    const x = ind * 20;
    ctx.fillText(text, x, y);
    if (y > 100 + Math.random() * 10000) ypos[ind] = 0;
    else ypos[ind] = y + 20;
  });
}

setInterval(matrix, 50);
body {
  margin: 0;
  height: 100vh;
  width: 100vw;
}

.container{
  background-color: white;
}
<canvas id='canv'>
  <div class='container'>
    <p>Some div with login in</p>
  </div>
</canvas>

Is there someway to fix it?

Thanks for your attention and help.

codepen css html javascript
1 Answers

Here's a possible solution:

const canvas = document.getElementById('canv');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');
let cols = Math.floor(window.innerWidth / 20) + 1;
let ypos = Array(cols).fill(0);

ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

function matrix () {
  const w = window.innerWidth;
  const h = window.innerHeight;
  
  if (canvas.width !== w) {
    canvas.width = w;
    cols = Math.floor(window.innerWidth / 20) + 1;
    ypos = Array(cols).fill(0);
  }
  if (canvas.height !== h) {
    canvas.height = h;
  }

  ctx.fillStyle = '#0001';
  ctx.fillRect(0, 0, w, h);

  ctx.fillStyle = '#0f0';
  ctx.font = '15pt monospace';

  ypos.forEach((y, ind) => {
    const text = String.fromCharCode(Math.random() * 128);
    const x = ind * 20;
    ctx.fillText(text, x, y);
    if (y > 100 + Math.random() * 10000) ypos[ind] = 0;
    else ypos[ind] = y + 20;
  });
}

setInterval(matrix, 50);
body {
  margin: 0;
  background-color: #000;
}

.container {
  background-color: rgba(255, 255, 255, 0.85);
  margin: 50px 10%;
  padding: 3rem;
  position: relative;
  z-index: 1;
}

#canv {
  position: fixed;
  top: 0;
  left: 0;
}
<canvas id='canv'></canvas>
<div class='container'>
  <p>Some div with login in</p>
</div>

Play around with the CSS of .container to make it look like you want. Don't remove the position and z-index (they are needed to keep it on top of the <canvas>).

Note: The CSS required to place .container on top is rather simple and it's not the reason I added the answer for.

The reason is because your matrix script was not responsive. I made minor mods to it and it now resizes when viewport size changes.

Welcome to SO.

user_18916770
Related