Duda repeticion CSS

[juangemelo01]

Hola amigos, nuevamente dando lata

Tengo una duda,

tengo lo siguiente en un archivo llamado diseño.css

Código:

/* partes de una nube*/ 
.circ1{ 
width:80px;
height:80px; 
-webkit-border-radius:80px; 
-moz-border-radius:80px;
 border-radius:80px;
background-color:rgb(207,230,254); 
margin:13.2px 0 0 60px;
} 

.circ2{
width:99px;
height:53px; 
-webkit-border-radius: 53px / 36px; 
-moz-border-radius: 53px / 36px;
border-radius: 80px / 36px;
background-color:rgb(207,230,254); 
margin:-60px 0 0 80px;
}

.circ3{
width:99px;
height:60px; 
-webkit-border-radius: 53px / 36px; 
-moz-border-radius: 53px / 36px;
border-radius: 53px / 36px;
background-color:rgb(207,230,254); 
margin:-60px 0 0 0px;
}
/* final partes de la nube*

#nube{ 
opacity: 0.6;
margin:-3;
position:absolute;
}

a la hora de implementarlo en mi pagina web lo hago asi

Código HTML:

<div id="mc">
<div class="circ1"></div>
<div class="circ2"></div>
<div class="circ3"></div>
</div> 

con esto tengo una nube (algo abstracta), mi duda es,
¿existe alguna forma de hacer que la nube se repita horizontalmente cada cierta distancia de manera automatica?

¿puedo incorporar la nube hecha como parte de mi fondo (background) ?
por cierto, el fondo que uso es el siguiente

Código:

body{ 

/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #66CCFF 0%, #66CCFF 49%, #FFFFFF 49%, #FFFFFF 49%, #3333CC 51%, #0033CC 91%, #000000 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #66CCFF 0%, #66CCFF 49%, #FFFFFF 49%, #FFFFFF 49%, #3333CC 51%, #0033CC 91%, #000000 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #66CCFF 0%, #66CCFF 49%, #FFFFFF 49%, #FFFFFF 49%, #3333CC 51%, #0033CC 91%, #000000 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #66CCFF), color-stop(0.49, #66CCFF), color-stop(0.49, #FFFFFF), color-stop(0.49, #FFFFFF), color-stop(0.51, #3333CC), color-stop(0.91, #0033CC), color-stop(1, #000000));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #66CCFF 0%, #66CCFF 49%, #FFFFFF 49%, #FFFFFF 49%, #3333CC 51%, #0033CC 91%, #000000 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #66CCFF 0%, #66CCFF 49%, #FFFFFF 49%, #FFFFFF 49%, #3333CC 51%, #0033CC 91%, #000000 100%);
background-repeat: no-repeat;
background-attachment: fixed;
}

Gracias amigos y espero su respuesta