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

[Triby]

No creo que puedas repetir esa nube como si fuera una imagen de fondo y, en caso de que sea posible, no me parece correcto usar elementos estructurales para hacer algo que puedes lograr fácilmente con una imagen y sin meter "basura" en tu código.

[pzin]

Yo pienso como Triby. Cada cosa para lo que es.

De todas formas, y si no quieres hacer caso , podrías lograrlo imitando el fondo con elementos usando posicionamiento absoluto, z-index y demás cosas.

[juangemelo01]

primeramente Gracias por contestar
bueno, yo lo decía por lo siguiente

(Abrir preferentemente con crhome o safari,
con opera no tiene animacion y con firefox si, pero tengo un mayor desface)
aun no le eh hecho algo para IE

http://juangemelonet.zz.mu/movimiento2/


Aun soy novato en css, y pues también quisiera ver si hay forma de integrar todo eso en el Background, para evitar desfaces por el porcentaje de visibilidad en los navegadores

por cierto, que les parece hasta donde llevo? (aun es una beta, no lo eh terminado aun

Gracias amigos y espero su respuesta

[Triby]

Ahh bueno, siendo así, la cosa cambia... me gusta el experimento.

[juangemelo01]

Gracias Triby por contestar.
Pues de hecho, creo que me preocupa mas por el momento el desface de monitores y navegadores

¿Existira alguna forma para combinar las motañas, arboles etc. con el fondo y evitar de esta forma el desface?

Gracias amigos y espero su respuesta.

[pzin]

Para el tema de resoluciones diferentes, en tu caso habría que trabajar en algunas cosas con medidas fijas. Por ejemplo, a mi en una resolución de 1920x1080 se me ve mal lo que es la orilla:



porque el top está puesto porcentualmente. Eso habría que fijarlo en pixeles.

Si con desfase te refieres a que en un navegador vaya mejor que en otro, tarde más en arrancar o lo que sea, no hay arreglo para ello. Seguramente en Safari y Chrome te irá mejor que en Firefox supongo, pero eso es porque Chrome es generalmente más rápido que Firefox.

¿Has pensando en que las nubes vayan más despacio? Yo creo que quedaría mejor y seguramente así se solucione un poco ese desfase.

[juangemelo01]

Gracias Bonez por responder, ahorita ya estoy siguiendo tu consejo de dejarlo en porcentaje
gracias por la observación de las nubes, lo tomare en cuenta, hoy espero subir una actualización del experimento XD