div con background animado que no muestre scroll

[khonzu]

Estoy trabajando con un div que se encuentra justo encima del body y tiene un background animado, el problema es que utilizo una imagen que tiene w=2000px y h=2000px, dado que es requerido, y debido a esto la pantalla completa me sale con scroll y no quiero eso, sólo quiero que muestre lo que se alcance a ver en la pantalla sin este scroll. No puedo usar overflow: hidden; en el body porque en otras páginas si lo requiero y quise hacerlo en el css del div, pero no funciona. Este es el css del div en cuestión:

.fog
{
position:absolute;
top: 50%;
left: 50%;
width: 2000px;
height: 2000px;
margin-top: -1000px;
margin-left: -1000px;
opacity: .5;
background: url('/Styles/Images/fog.png') repeat-x 0 center;

-webkit-animation-name: circulos;
-webkit-animation-duration: 120s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;

}

@-webkit-keyframes circulos {
from {
-webkit-transform: rotate(0deg);
background-position: 0 center;
}
to {
-webkit-transform: rotate(360deg);
background-position: 1000px center;
}
}

Estoy atento a las sugerencias...

[ArturoGallegos]

prueba con

Código CSS:

.fog
{
width:100%;
height:100%;
opacity: .5;
background: url('/Styles/Images/fog.png') repeat-x center center;
 
-webkit-animation-name: circulos;
-webkit-animation-duration: 120s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
 

[kseso?]

¿2000x2000px para un efecto méramente ornamental?
Creo, y es sólo una sugerencia, que se evitaría 2 3 problemas (peso imagen + scroll + ralentizar el efecto) si utiliza una imagen más pequeña y la utiliza como fondo 100% (con cualquiera de las varias técnicas) en un div y no en el body.

Adenda:
La propiedad animation puede declararse de forma acortada:

Código CSS:

animation: circulos 120s infinite linear;