CODEWITHSUNDEEP
javascripthtmlcsscanvashtml5-canvas
finners
finners

Reputation: 885

Making a canvas animation a background element on a parent div

Currently I have this piece of code running a canvas animation that shows subtle stars moving and sparkling. Currently the canvas is it's own element but I'm wanting to move it to be a background element on a parent div. Can anybody show me how to do this. JS fiddle attached here - https://jsfiddle.net/83aahcng/

<div id="container">
    <canvas id="pixie"></canvas>
</div>

Upvotes: 2

Views: 1841

Answers (1)

Miles
Miles

Reputation: 784

I would just put a div over pixie like this... div over pixie.

HTML:

<div id="container">
<div id="over_stuff">
 Here's some stuff over #pixie!
</div>
<canvas id="pixie"></canvas>
</div>

CSS:

#container {
overflow:hidden;
position:relative;
z-index: 1;
}
#pixie {
z-index:0;
background:#010222;
background: 
}
#over_stuff{
color:white;
position:absolute;
top:0px;
left:0px;
z-index:5;
padding:10px;
}

Is there is something I'm not understanding? This seems way too simple

Upvotes: 3

Related Questions