CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
heyitsmyusername
heyitsmyusername

Reputation: 651

Including a dynamic/moving background in Bootstrap website

How do I make an animated background (javascript/css) as my site's body background (or the equivalent)? I can fit it in a div and make it work, but cannot figure out setting it as the background. Note: I'm using bootstrap.

I'm assuming I just select the body in my javascript, but I might have been doing it wrong. Something like: canvas = document.body and then remove the 'myHolder' since the holder would then be the body.

Below is my HTML div to display the content. (I know this is wrong for setting it as background, but its the only way I can get it to display)

<div id="myHolder">
<canvas id="myAnimation"></canvas>
</div>

Below is my javascript (the parts related to the canvas/div above):

initHeader() {
        width = window.innerWidth;
        height = window.innerHeight;
        target = {x: width/2, y: height/2};

        largeHeader = document.getElementById('myHolder');
        largeHeader.style.height = height+'px';

        canvas = document.getElementById('myAnimation');
        canvas.width = width;
        canvas.height = height;
        ctx = canvas.getContext('2d');
}

function resize() {
        width = window.innerWidth;
        height = window.innerHeight;
        largeHeader.style.height = height+'px';
        canvas.width = width;
        canvas.height = height;
    }

UPDATE: My page now contains the following code: The animation is displaying as the background, but the other divs are pushed further down the page still. However, the background is displayed correctly behind the other divs.

    <style>
    #myAnimation {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    </style>
    <div id="myHolder">
    <canvas id="myAnimation" width="100%" height="100%"></canvas>
    </div>
....page content...

Upvotes: 0

Views: 1144

Answers (1)

Jack Guy
Jack Guy

Reputation: 8523

Luckily, this is just a CSS change!

#myAnimation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -100; //Put your background behind the rest of your content
}

note that this will stretch your canvas, so you'll need to set width and height to 100% as attributes if you want to avoid that.

<canvas id="myAnimation" width="100%" height="100%">

Upvotes: 1

Related Questions