全屏旋转背景图像

Question

i've been looking everywhere how to achieve this effect of an animated spinning image that is covering the whole screen. Like this one .

bassically, what i want is to make it spin and to be fullscreen.

this is what i got so far, http://losmosca.com.ar/reiki/

HTML:

<img src="img/bg.jpg" id='test' class='rotating'>

CSS3:

#test {
position:relative;
margin:0 auto;
width:1000px;
height:1000px;
}

@-webkit-keyframes rotating {
     from{
        -webkit-transform: rotate(0deg);
     }
     to{
        -webkit-transform: rotate(360deg);
     }
}

.rotating {
    -webkit-animation: rotating 1000s linear infinite;
}

as you can see, i can make it spin but not fullscreen, is it possible? thank you!

Answer 1

Try using width:100%; rather than width:1000px;

and height:100% rather than height:1000px;

Cool effect by the way, I may have to find an excuse to use that trick.