html - SVG as a div background -

html - SVG as a div background -

what trying have animated svg background similar achieved here, learning: https://conference.laravel.com/

it seems can't css svg background need create elements inline html. how far got:

full code

http://jsfiddle.net/c8d34/13/

i want svg stage take total bluish area can set svg elements within , apply animations in first link. however, header menu content forces svg outside of bluish area.

how can create sit down behind content , not pushed downwards it? creating div way?

my svg code

<svg viewbox="0 0 100 100"> /* here */ <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>

however because there other content in box, , want svg take 100% of bluish area, forces svg down.

question

i want have animated svg background in bluish area multiple animated elements. however, header pushing whole svg area downwards off bluish area. how create appear background , have content on top?

i gave z-index property nav element link click-able. , utilize position:absolute svg element. check demo.

svg { width:100%; height:100%; position:absolute; top:0; left:0; z-index:0; } div.buttons{position:absolute; bottom:0;} /*div contains buttons free trial*/ nav{position:relative;z-index:1;}

html css svg