I have some CSS which renders (and animates in webkit) a background image of some clouds.
BODY
{
background: #99cccc url('../img/Clouds_Large.png') repeat 10% 0%;
-webkit-animation-name: ANIMATECLOUDSBG;
-webkit-animation-duration: 2500s;
-webkit-animation-function: linear;
-webkit-animation-count: infinite;
height:100%;
max-height:100%;
overflow:auto;
}
#clouds
{
background: url('../img/clouds_medium.png') repeat 20% 0%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 1;
-webkit-animation-name: ANIMATECLOUDSFG;
-webkit-animation-duration: 1200s;
-webkit-animation-function: linear;
-webkit-animation-count: infinite;
}
When I fire up this page in firefox and chrome, the clouds appear on top of the scroll bars, but I have no idea why!
Can anyone tell me how to fix this so they only render within the body of the page?
My markup is very simple:
Thanks
