"coprire" la pagina web con un'immagine

[giova95]

Ciao a tutti, faccio prima a inserirvi i codici così capite
HTML:

<div id="sfondo"></div> 
 
<script type="text/javascript"> 
function sfondo() { 
 document.getElementById('sfondo').style.height=document.body.offsetHeight + 'px'; 
} 
document.onload = sfondo(); 
</script>

CSS:

#sfondo {
position:absolute;
top: 0;
z-index:5000;
background: url('link-img') repeat;
width: 100%;
opacity: 0.2;
}

Come si capisce dai codici l'effetto creato è quello di ricoprire la pagina web con un immagine trasparente (opacity impostata su 0.2)... l'effetto è sorprendente, sopratuttto se si utilizza una gif animata come questa:

(ovviamente è nera, ma con l'opacity 0.2 è molto più trasparente)

Il problema è che in questo modo ogni link, bottone eccetera non risulta cliccabile.
Come posso fare a rendere cliccabili gli alimenti della pagina?
O, in alternativa, come posso creare un effetto simile lasciando inalterata la navigabilità del sito?

[fcaldera]

invece di usare un elemento a sè stante potresti usare uno pseudoelemento (es. body:before) e impostare lo stile dando uno z-index negativo (il body dovrà avere background: transparent)

oppure aggiungi a quelle regole anche pointer-events: none; (tenendo conto del supporto parziale della proprietà)

[giova95]

ti ringrazio.
Per quanto riguarda lo pseudo-elemento ci avevo pensato, ma ho la necessità di impostare l'altezza tramite javascript e utilizzando uno pseudo elemento non saprei come fare.
Pointer-events da quanto mi risulta funziona solo su chrome e firefox... penso sia la soluzione migliore purtroppo.
Ti ringrazio ancora

[fcaldera]

Originariamente inviato da giova95
ti ringrazio.
Per quanto riguarda lo pseudo-elemento ci avevo pensato, ma ho la necessità di impostare l'altezza tramite javascript e utilizzando uno pseudo elemento non saprei come fare.

js non è necessario.

body { position: relative }
body:before {
 content: "";
 position: absolute;
 z-index: -1;
 top: 0; left: 0; right: 0; bottom: 0;
 background : ... ;
 opacity: .2;
}

[giova95]

fantastico, non ci avevo pensato
Funziona a meraviglia Grazie mille