+ 4

How can i make a canvas the background for a HTML site?

I created some cool particle effects and i want them to be backgrounds

html css javascript html5 canvas css3 particle

25th Feb 2017, 9:12 AM

Jesse

4 Answers

+ 20

<canvas style="z-index:0" /> <-- this will place the canvas behind all other elements document.body.style.background="url('"+document.getElementsByTagName("canvas")[0].toDataURL()+"');"; <-- convert canvas data to PNG and insert it.... <canvas id="canv" /><style> body{background:url(#canv);}</style>

25th Feb 2017, 9:17 AM

Valen.H. ~

+ 6

Give your canvas an id, and then in CSS: * { margin: 0; padding: 0; box-sizing: border-box; } // basic reset body { width: 100vw; height: 100vh; } // 100% both x and y viewport #thisCanvas { width: 100%; height: 100%; } // or use inherit, to inherit from body

28th Feb 2017, 4:19 PM

Mark Foxx

+ 2

also you can try to play with z-indexes

25th Feb 2017, 9:30 AM

Лев Давыдов

+ 1

A way to do this (but i think it's not optimal) is to define you canvas in your body with an id selector for CSS and then define background in CSS. In HTML : <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div id="canvas"><canvas>Your Canvas</canvas></div> </body> </html> In CSS : #canvas { background:url(Your image URL) }

25th Feb 2017, 9:37 AM

Nicolas Bonnet