cambiar Background de mi web

paulrrdiaz · #1 (**permalink**) 02/05/2012, 20:35

Hola muchachos, que tal?
Bueno tengo un par de dudas
1.- como hago para que el bg de mi web se cambia cada cierto tiempo, pero no bruscamente, si no con algun efecto fade o algo por el estilo?
Ahora olvidando la primera pregunta
2.- como hago para que el bg de mi web cambie cada vez que entro nuevamente a mi web?
Gracias de antemano, ustedes siempre me salvan la vida =D

chinanzio · #2 (**permalink**) 03/05/2012, 09:53

para la pregunta 1
algo asi te sirve ?

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript" ></script>
 
<style>
    body {
        margin: 0;
        padding: 0;
    }
    
    div#bg-1 {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url('http://static2.grsites.com/archive/textures/dgren/dgren002.jpg');
    }
 
    div#bg-2 {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url('http://static3.grsites.com/archive/textures/blue/blue003.jpg');
        display: none;
    }
    
    div#bg-3 {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url('http://static3.grsites.com/archive/textures/brown/brown007.jpg');
        display: none;
    }
</style>
 
<script type="text/javascript">
var divIds = ["bg-1", "bg-2", "bg-3"];
var currentIndex = 0;
function changeBackground(country) {
    var outDivId = divIds[currentIndex];
    currentIndex = (currentIndex + 1 ) % divIds.length;
    var inDivId = divIds[currentIndex];
 
    var outDiv = document.getElementById(outDivId);
    var inDiv = document.getElementById(inDivId);
    $(outDiv).fadeOut("slow");
    $(inDiv).fadeIn("slow");
 
    setTimeout(changeBackground, 3000);
}
 
setTimeout(changeBackground, 3000);
</script>
</head>
<body>
    <div id="bg-1"></div>
    <div id="bg-2"></div>
    <div id="bg-3"></div>
</body>
</html>