how to have my background run through div elements?-CodePudding

I have a animated background I created with javascript for my website. The problem is that whenever I add a new element to my html the background animation simply starts below the element on the bottom of the page. I am trying to have the background fill all the black space where I have no content within my element. Example: I have an FAQ accordion that has wide margins on the left and right. I would want my background running on the sides of the FAQ bar but not the FAQ bar itself. JS:

var canvas = document.body.appendChild( document.createElement( 'canvas' ) ),
context = canvas.getContext( '2d' );
context.globalCompositeOperation = 'lighter';
canvas.width = 1280;
canvas.height = 800;
draw();

var textStrip = ['1', '0', '010', '11', '100', '00', '0x0', 'x01', 'P', 
'M', '!', '000', '1001'];

var stripCount = 60, stripX = new Array(), stripY = new Array(), dY = 
new Array(), stripFontSize = new Array();

for (var i = 0; i < stripCount; i  ) {
stripX[i] = Math.floor(Math.random()*1265);
stripY[i] = -100;
dY[i] = Math.floor(Math.random()*7) 3;
stripFontSize[i] = Math.floor(Math.random()*16) 8;
}

var theColors = ['#cefbe4', '#81ec72', '#5cd646', '#54d13c', '#4ccc32', 
'#43c728'];

var elem, context, timer;

function drawStrip(x, y) {
    for (var k = 0; k <= 20; k  ) {
    var randChar = textStrip[Math.floor(Math.random()*textStrip.length)];
    if (context.fillText) {
        switch (k) {
        case 0:
            context.fillStyle = theColors[0]; break;
        case 1:
            context.fillStyle = theColors[1]; break;
        case 3:
            context.fillStyle = theColors[2]; break;
        case 7:
            context.fillStyle = theColors[3]; break;
        case 13:
            context.fillStyle = theColors[4]; break;
        case 17:
            context.fillStyle = theColors[5]; break;
        }
        context.fillText(randChar, x, y);
    }
    y -= stripFontSize[k];
}
}

function draw() {
    // clear the canvas and set the properties
context.clearRect(0, 0, canvas.width, canvas.height);
context.shadowOffsetX = context.shadowOffsetY = 0;
context.shadowBlur = 8;
context.shadowColor = '#94f475';

for (var j = 0; j < stripCount; j  ) {
    context.font = stripFontSize[j] 'px MatrixCode';
    context.textBaseline = 'top';
    context.textAlign = 'center';
    
    if (stripY[j] > 1358) {
        stripX[j] = Math.floor(Math.random()*canvas.width);
        stripY[j] = -100;
        dY[j] = Math.floor(Math.random()*7) 3;
        stripFontSize[j] = Math.floor(Math.random()*16) 8;
            drawStrip(stripX[j], stripY[j]);
        } else drawStrip(stripX[j], stripY[j]);
    
        stripY[j]  = dY[j];
     }
  setTimeout(draw, 70);
}

Some CSS:

}

.accordion .accordion-item {
  border-bottom: 1px solid #e5e5e5;
}

.accordion .accordion-item button[aria-expanded='true'] {
  border-bottom: 1px solid #66ff00;
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  border: 1px solid #66ff00;
  color:#66ff00 ;
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}

CodePudding user response：

Set the background with absolute position so other elements won't be affected:

var canvas = document.body.appendChild( document.createElement( 'canvas' ) ),
context = canvas.getContext( '2d' );
context.globalCompositeOperation = 'lighter';
canvas.width = 1280;
canvas.height = 800;
draw();

var textStrip = ['1', '0', '010', '11', '100', '00', '0x0', 'x01', 'P', 
'M', '!', '000', '1001'];

var stripCount = 60, stripX = new Array(), stripY = new Array(), dY = 
new Array(), stripFontSize = new Array();

for (var i = 0; i < stripCount; i  ) {
stripX[i] = Math.floor(Math.random()*1265);
stripY[i] = -100;
dY[i] = Math.floor(Math.random()*7) 3;
stripFontSize[i] = Math.floor(Math.random()*16) 8;
}

var theColors = ['#cefbe4', '#81ec72', '#5cd646', '#54d13c', '#4ccc32', 
'#43c728'];

var elem, context, timer;

function drawStrip(x, y) {
    for (var k = 0; k <= 20; k  ) {
    var randChar = textStrip[Math.floor(Math.random()*textStrip.length)];
    if (context.fillText) {
        switch (k) {
        case 0:
            context.fillStyle = theColors[0]; break;
        case 1:
            context.fillStyle = theColors[1]; break;
        case 3:
            context.fillStyle = theColors[2]; break;
        case 7:
            context.fillStyle = theColors[3]; break;
        case 13:
            context.fillStyle = theColors[4]; break;
        case 17:
            context.fillStyle = theColors[5]; break;
        }
        context.fillText(randChar, x, y);
    }
    y -= stripFontSize[k];
}
}

function draw() {
    // clear the canvas and set the properties
context.clearRect(0, 0, canvas.width, canvas.height);
context.shadowOffsetX = context.shadowOffsetY = 0;
context.shadowBlur = 8;
context.shadowColor = '#94f475';

for (var j = 0; j < stripCount; j  ) {
    context.font = stripFontSize[j] 'px MatrixCode';
    context.textBaseline = 'top';
    context.textAlign = 'center';
    
    if (stripY[j] > 1358) {
        stripX[j] = Math.floor(Math.random()*canvas.width);
        stripY[j] = -100;
        dY[j] = Math.floor(Math.random()*7) 3;
        stripFontSize[j] = Math.floor(Math.random()*16) 8;
            drawStrip(stripX[j], stripY[j]);
        } else drawStrip(stripX[j], stripY[j]);
    
        stripY[j]  = dY[j];
     }
  setTimeout(draw, 70);
}

.accordion .accordion-item {
  border-bottom: 1px solid #e5e5e5;
}

.accordion .accordion-item button[aria-expanded='true'] {
  border-bottom: 1px solid #66ff00;
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  border: 1px solid #66ff00;
  color:#66ff00 ;
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}
.content
{
  background: rgba(127,127,127,0.6);
  text-align: center;
  height: 3em;
}
.content   *
{
  background: pink;
  width: 5em;
  display: inline-block;
  height: 5em;
}

/* this is it*/
canvas
{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

<div >blah</div>
<div>test</div>