Because I Can!
Animated Green Mist
This includes a subtle animation that should not be noticeable at first. The intention is to lend a little bit more interest for ages that include a great deal of text, without being a distraction from the content.
I reworked the 5 overlapping radial gradients used for my Cloudy Sky into 5 enormous greenish overlapping radial gradients. The 6th gradient used in this case is not used for blending but has been used to suggest backlighting.
While the mist and backlighting are pure CSS, this demo page also includes 2 background images that are layered with the CSS backlighting to act as a backdrop for the mist's animation. To prevent these three 'backdrop' background elements from being animated, they have been attached to the body proper, while the 5 mist gradients have been attached to body:before. The :before psuedo element has a width and height of 100%, is position:fixed, and z-index:-1 to keep it from interfering with the page's contents.
A width and height of 100% makes this element the height and width of the screen rather than the page. That works perfectly in this case since the entire scene is meant to be fixed.
I chose position:fixed over position:absolute to keep the mist from scrolling with the page. As such background-attachment:fixed; is probably not really necessary, but I tossed it in just in case some browser somewhere is happier with it that way.
Without the z-index:-1, the mist floats around in front (/on top ) of the page contents. "blowing it away" might make for an interesting opening animation (run just the once). But it might become extremely tiresome after the initial viewing.
The green mist becomes thicker in smaller areas
It also does not zoom in properly when placed in a scrolling element - still sorting that one out.
@keyframes animatedBackground {
from { background-position: -100% 100%, -50% 100%, -50% 80%, 0 0, -20% 86%; }
to { background-position: 150% 100%, 150% 100%, 150% 70%, 150% 20%, 150% 90%; }
}
body {
padding: 0; margin:0;
alignment-adjust:after-edge;
background: rgb(94,153,82);
background-attachment:fixed;
background-position: center bottom;
bottom:0;
background-size: auto 35%, 100%, 100%;
-moz-background-size: auto 35%, 100%, 100%;
background-repeat: repeat-x, no-repeat, no-repeat;
background-image:
url('wolfes.png'),
-moz-radial-gradient(center, ellipse cover, rgba(94,153,82,.4) 30%, rgba(47,63,10,1) 100%),
url('Vegetation-Silhouette-dark.png');
background-image:
url('wolfes.png'),
-webkit-radial-gradient(center, ellipse cover, rgba(94,153,82,.3) 30%,rgba(47,63,10,1) 100%),
url('Vegetation-Silhouette-dark.png');
background-image:
url('wolfes.png'),
radial-gradient(ellipse at center, rgba(94,153,82,.3) 30%,rgba(47,63,10,1) 100%),
url('Vegetation-Silhouette-dark.png');
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e9952', endColorstr='#2f3f0a',GradientType=1 );
}
body:before{
content:" ";
height:100%;
width:100%;
z-index:-1;
position:fixed;
animation: animatedBackground 16s ease-in-out infinite alternate;
background-repeat:repeat-x;
background-position: center bottom;
background-attachment:fixed;
background-size: 70% 40%, 90% 187%, 95% 36%, 97% 156%, 126% 74%;
background-image: /* Safari 5.1 to 6.0 */
-webkit-radial-gradient(rgba(186,207,106,.5) 0%, rgba(200,211,163,.01) 54%, rgba(200,211,163,0) 74%, rgba(200,211,200,0) 100%),
-webkit-radial-gradient(rgba(186,207,106,.3) 0%, rgba(200,211,163,.01) 64%, rgba(200,211,163,0) 88%, rgba(200,211,200,0) 100%),
-webkit-radial-gradient(rgba(186,207,106,.5) 0%, rgba(200,211,163,.01) 64%, rgba(200,211,163,0) 98%, rgba(200,211,200,0) 100%),
-webkit-radial-gradient(rgba(186,207,106,.4) 0%, rgba(200,211,163,.01) 87%, rgba(200,211,163,0) 92%, rgba(200,211,200,0) 100%),
-webkit-radial-gradient(rgba(200,207,200,.6) 0%, rgba(200,211,163,.01) 74%, rgba(200,211,163,0) 90%, rgba(200,211,200,0) 100%);
background-image: /* For Opera 11.6 to 12.0 */
-o-radial-gradient(rgba(186,207,106,.5) 0%, rgba(200,211,163,.01) 54%, rgba(200,211,163,0) 74%, rgba(200,211,200,0) 100%),
-o-radial-gradient(rgba(186,207,106,.3) 0%, rgba(200,211,163,.01) 64%, rgba(200,211,163,0) 88%, rgba(200,211,200,0) 100%),
-o-radial-gradient(rgba(186,207,106,.5) 0%, rgba(200,211,163,.01) 64%, rgba(200,211,163,0) 98%, rgba(200,211,200,0) 100%),
-o-radial-gradient(rgba(186,207,106,.4) 0%, rgba(200,211,163,.01) 87%, rgba(200,211,163,0) 92%, rgba(200,211,200,0) 100%),
-o-radial-gradient(rgba(200,207,200,.6) 0%, rgba(200,211,163,.01) 74%, rgba(200,211,163,0) 90%, rgba(200,211,200,0) 100%);
background-image: /* For Firefox 3.6 to 15 */
-moz-radial-gradient(rgba(186,207,106,.5) 0%, rgba(200,211,163,.01) 54%, rgba(200,211,163,0) 74%, rgba(200,211,200,0) 100%),
-mozradial-gradient(rgba(186,207,106,.3) 0%, rgba(200,211,163,.01) 64%, rgba(200,211,163,0) 88%, rgba(200,211,200,0) 100%),
-mozradial-gradient(rgba(186,207,106,.5) 0%, rgba(200,211,163,.01) 64%, rgba(200,211,163,0) 98%, rgba(200,211,200,0) 100%),
-mozradial-gradient(rgba(186,207,106,.4) 0%, rgba(200,211,163,.01) 87%, rgba(200,211,163,0) 92%, rgba(200,211,200,0) 100%),
-mozradial-gradient(rgba(200,207,200,.6) 0%, rgba(200,211,163,.01) 74%, rgba(200,211,163,0) 90%, rgba(200,211,200,0) 100%);
background-image: /* Standard syntax */
radial-gradient(rgba(186,207,106,.5) 0%, rgba(200,211,163,.01) 54%, rgba(200,211,163,0) 74%, rgba(200,211,200,0) 100%),
radial-gradient(rgba(186,207,106,.3) 0%, rgba(200,211,163,.01) 64%, rgba(200,211,163,0) 88%, rgba(200,211,200,0) 100%),
radial-gradient(rgba(186,207,106,.5) 0%, rgba(200,211,163,.01) 64%, rgba(200,211,163,0) 98%, rgba(200,211,200,0) 100%),
radial-gradient(rgba(186,207,106,.4) 0%, rgba(200,211,163,.01) 87%, rgba(200,211,163,0) 92%, rgba(200,211,200,0) 100%),
radial-gradient(rgba(200,207,200,.6) 0%, rgba(200,211,163,.01) 74%, rgba(200,211,163,0) 90%, rgba(200,211,200,0) 100%);
}