I have set up a fiddle, but it seems like the display is not quite right. You can check it out here - http://jsfiddle.net/kVNQb/ - although it might be helpful to take a look at the code regardless.
The snow animation I am using is from this website:
My goal is to have a background image and then animate the snow on top of it. Currently, I am facing an issue where I lose either the animated snow or the background image.
Do I need to create an ID and set the desired image as a background for that?
Here is the HTML code:
<body>
<div class="row">
<div class="large-12 columns">
<div id="container">
</div>
</div>
</div>
</body>
CSS code:
/*Custom CSS styles used in addition to the standard Foundation 4 style sheet*/
.fixed-body {
background-image: url(http://s17.postimg.org/9htu61zjj/background.jpg);
}
* {
margin: 0;
padding: 0;
}
a {
color: white;
font-style: italic;
}
/*Keyframes*/
@keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
100% { background-position: 500px 1000px, 400px 400px, 300px 300px }
}
@-moz-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
100% { background-position: 500px 1000px, 400px 400px, 300px 300px }
}
@-webkit-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
@-ms-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
100% { background-position: 500px 1000px, 400px 400px, 300px 300px }
}
#container {
width: 800px;
margin: 200px auto;
text-align: center;
color: white;
font: 100px/1 'Spirax', cursive;
text-shadow: 0px 0px 4px rgba(0,0,0, 0.5);
}
#container p { font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif }