Benjamin Gibbs710 Benjamin Gibbs710 - 1 year ago 46
CSS Question

Canvas to span entire page

Building a website for my photography and I'm struggling to make the back ground canvas span the entire height of the page. Also the stars inside the canvas become elongated sometimes - you have to refresh to make them the correct size.

The html code for the canvas :

<body>
<canvas id="canvas"></canvas>
<header>


css code :

canvas {
position:absolute;
top:0;
left:0;
width:100%;
min-height: 100%;
z-index:-1;
background: #111;
}


Link to page: https://benjamintgibbs.github.io/benjaminAstro.github.io/

Image: Doesn't span page

Answer Source

Since you would like the canvas to serve as a background image. why not position the element fixed to the screen?

example position:fixed (you have already set width and height of 100%)

   #canvas{
    position: fixed;
    }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download