• User Newbie

    Cambiare background di un div

    Salve,
    Spero di essere nella sezione giusta. Ho un piccolo problemino.
    In pratica ho una pagina contenente un DIV con background.
    Avrei la necessità di cambiare automaticamente ogni x secondi il background di questo div, magari anche con dissolvenza (se possibile).
    Ho creato un css dove ho i vari background:

    #page {
    /* Background image: /
    background-image: url("../images/background1.jpg");
    background-repeat: no-repeat;
    padding: 1em;
    height: 20em;
    }
    #page2 {
    /
    Background image: /
    background-image: url("../images/background2.jpg");
    background-repeat: no-repeat;
    padding: 1em;
    height: 20em;
    }
    #page3 {
    /
    Background image: /
    background-image: url("../images/background3.jpg");
    background-repeat: no-repeat;
    padding: 1em;
    height: 20em;
    }
    #page4 {
    /
    Background image: */
    background-image: url("../images/background4.jpg");
    background-repeat: no-repeat;
    padding: 1em;
    height: 20em;
    }

    A questo punto il DIV nella pagina richiama il primo background:

    <div id="page">

    come faccio a cambiarlo??
    Ho provato a cercare sul web, ma non trovo molto.
    Mi potete aiutare.

    Vi ringrazio anticipatamente.
    Marco


  • User Newbie

    Ho provato ad aggiornare in questo modo la pagina, ma continua a non funzionare:

    #innerpages {
    /* Background image: */
    background-image: url("images/background2.jpg");
    background-repeat: no-repeat;
    padding: 1em;
    height: 20em;

    }
    </style>
    <script type="text/javascript">

    function back() {
    var web = [];
    web[4] = "background1.jpg";
    web[1] = "background2.jpg";
    web[2] = "background3.jpg";
    web[3] = "background4.jpg";

    var x = Math.ceil( web.length * Math.random() );
    var div = document.getElementById("innerpages");
    var img = "images/"+web[x]+"";
    alert (x);
    alert (web[x]);
    
    div.style.backgroundImage = "url('images/background4.jpg');";
    /*alert (div.style.backgroundImage = URL('images/'+web[x]+''));*/
    setTimeout( "back()" , 5000 );
    

    }
    </script>
    </head>
    <body id="your-site-id" onload="back()">

    [...]

    <div id="contentbox" class="page">
    
        <div id="padding">
        
            <div id="innerpages" >
    

    Avete una qualche idea del perchè non mi cambia l'immagine?