CODEWITHSUNDEEP
javascriptjquerycssanimation
Skullomania
Skullomania

Reputation: 2215

How do I set animation to div behind image?

I have a jsfiddle animation that I want to set to use as a background div of a png image. I can set the height and width of the animation and I tried setting it to the div using 

document.getElementByID('progress').appendChild(canvas);

However, instead of the canvas displaying where it should it shows up under the image with the functioning animation. Here is the jsFiddle.

Upvotes: 0

Views: 1974

Answers (3)

Nvan
Nvan

Reputation: 1146

Apply this css. Z-index will put the canvas under others div.

#progress {
        position: relative;
}

canvas {
        top: 0;
        left: 0;
        z-index: -1;
        position: absolute;
 }

Upvotes: 0

tdc
tdc

Reputation: 5464

http://jsfiddle.net/3qc2p1va/

I added some CSS styles to the canvas element, made it absolute and positioned relatively to its parent.

canvas {
    display: inline;
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: -1;
}

Upvotes: 0

Sebass van Boxel
Sebass van Boxel

Reputation: 2602

The canvas will be placed underneath the #progressbar because the default css of this element is. position:static;.

When applying position:absolute; on the canvas it will be place on top of the #progressbar.

To be more precise:

#progress{
    position: relative;
}

canvas {
    position: absolute; 
    top: 0;
    left: 0;
}

Depending on the exact placement in the z-dimension, you can use z-index:-1; or z-index:1;. By doing this the canvas will be in front or behind the #progressbar.

Example code: http://jsfiddle.net/u4cLxjrg/1/

Upvotes: 4

Related Questions