Question

I have made a theme for my website (undisclosed) which involves CSS3 animations. It is falling snow. It’s cute. However I want it to appear over my existing items. I have tried playing about with z-index however this doesn’t work it appears. The page is temporarily hosted on: http://briandempsey.org.uk/mbxt/index.html

I’m not sure if this can be done, but I assume (maybe wrongly it can)

TL;DR: Need snow to appear over text and other items. How?

Answer 1

See here: http://jsfiddle.net/YzSS9/

HTML: (add a new element)

<div id="happy-xmas"> 
  <h1>Merry Christmas from everyone at</h1> 
</div>
<div id="flakes"></div>

Your old body definition will now be flakes, minus the background color and the associated animation, which stays on the body:

body{
    background-color: #6b92b9; 
    animation:bg 20s linear infinite;
}

@keyframes bg{
    from,to{background-color:#6b92b9;}
    50% {background-color:#b4cfe0;}
}

#flakes{
    height:100%;
    width:100%;
    top:0;
    position:absolute;
    ...
}