Problemas con fondo de escritorio aleatorio

PpMalakian · #1 (**permalink**) 24/05/2011, 19:45

Hola gente de Foros del Web, soy un usuario nuevo y me estoy interesando con esto de las paginas web, y tengo un problema con una pagina que estoy creando. mi duda es como puedo poner una imagen de fondo aleatoria, osea que cada que alguien entre el fondo que se ve sea diferente, y otra cosa es como puedo hacerle para que el fondo no se repita, y que se mueva en la pantalla para que no se vea cortada de abajo, muchas gracias de antemano, por cierto este es el codigo que estoy usando espero puedan responderme.

<script type="text/javascript">
var backgr1="http://www.guarnerosracingwear.com/fondos/fondo1.jpg"
var backgr2="http://www.guarnerosracingwear.com/fondos/fondo2.jpg"
var backgr3="http://www.guarnerosracingwear.com/fondos/fondo3.jpg"
var backgr4="http://www.guarnerosracingwear.com/fondos/fondo4.jpg"
var backgr5="http://www.guarnerosracingwear.com/fondos/fondo5.jpg"

var cur=Math.round(13*Math.random())
if (cur<=1)
backgr=backgr1
else if (cur<=4)
backgr=backgr2
else if (cur<=7)
backgr=backgr3
else if (cur<=10)
backgr=backgr4
else if (cur<=13)
backgr=backgr5
document.write('<body background="'+backgr+'" style="background-repeat:no-repeat; bgproperties="scroll" bgcolor="#FFFFFF">')

cristian_cena · #2 (**permalink**) 24/05/2011, 21:58

Hola, mira, yo lo encararía distinto al html y css.

en vez de hacer esto:
document.write('<body background="'+backgr+'" style="background-repeat:no-repeat; bgproperties="scroll" bgcolor="#FFFFFF">')
De entrada que esto no funciona background="'+backgr+'"

haría esto:
document.write('<img id="fondo" src="'+backgr+'" width="100%" height="100%"/>');

lo imprimes de modo que el html te quede así:

Código HTML:

Ver original<body>
<img id="fondo" src="la imagen de fondo" width="100%" height="100%"/>
<div id="contenedor"></div> <!-- el contenedor de todo lo que haya en esta página-->
</body>

luego en el css:

Código CSS:

Ver original*{margin:0; padding:0;}
#fondo{
display:block; <!-- convertimos la imagen en caja de bloque -->
position:absolute;
top:0; left:0;
z-index:0;
}
#contenedor{
position:relative;
width:960px; /*los px que quieras*/
margin:0 auto; /*si es que lo vas a centrar*/
z-index:1;
}

En este enlace puedes ver como trabaja z-index

Espero te sirva de ayuda. Saludos

PpMalakian · #3 (**permalink**) 26/05/2011, 06:31

Ok muchas lo probare como dices solo una duda más en que parte del codigo que estoy usando pondria lo que me especificas??