Header Casuale

[cruzeiro83]

Sto cercando, ma invano, di realizzare un header casuale. Ho letto vari post ma non so dove sbaglio.
Vi posto i miei codici, nell'attesa di incontrare qualche buona anima che mi aiuti.


Codice html:
<div class="Header-png"></div>


Codice css:
div.Header-png
{
position: absolute;
z-index:-2;
top: 0;
left: 0;
width: 1008px;
height: 225px;
background-image: url('../images/Header.png');
background-repeat: no-repeat;
background-position: left top;
}

[marcoocram]

Usa PHP o JS.

[cruzeiro83]

Originariamente inviato da cruzeiro83
Sto cercando, ma invano, di realizzare un header casuale. Ho letto vari post ma non so dove sbaglio.
Vi posto i miei codici, nell'attesa di incontrare qualche buona anima che mi aiuti.


Codice html:
<div class="Header-png"></div>


Codice css:
div.Header-png
{
position: absolute;
z-index:-2;
top: 0;
left: 0;
width: 1008px;
height: 225px;
background-image: url('../images/Header.png');
background-repeat: no-repeat;
background-position: left top;
}

non sono molto pratico, potrssti essere più chiaro? Come dovrò fare?

[Uluru]

supponiamo che tu abbia 6 sfondi possibili e che il div dell'header abbia id="header"
nomini le tue imgs di sfondo da 1 a 6 (con estensione del caso, es: 1.jpg, 2.jpg,..) e le posizioni in una cartella chiamata "imgs"
Nella tua pagina, subito dopo l'header (se lo metti prima la funzione getElementById fallisce, perchè il div "header" ancora non esiste e jscript non lo trova) inserisci il seguente snippet:
<script type='text/javascript'>
var sfondo = Math.floor(Math.random()*6 + 1) + ".jpg";
var header = document.getElementById("header");
header.style.backgroundImage = "url(imgs/" + sfondo +")";
</script>

Un'altra soluzione, sempre con jscript, sarebbe di creare oltre ad un css base, 6 css alternativi che vengono inclusi da uno snippet quale quello sopra ma posizionato all'interno della sezione head del documento.
Ciao

[cruzeiro83]

nulla da fare, non funziona. non mi compare nemmeno l'immagine.

[Uluru]

Il codice e la procedura che ti ho indicato sono ok, già testato e usato n volte

Forse stai sbagliando qualcosa a livello di path/nomi delle immagini
Oppure hai fatto confusione tra id e classe: nel mio esempio "header" è un id, non una classe (come nel tuo frammento di codice che hai riportato)