Vibility:hidden non funziona

[Sennin]

Salve a tutti, nel mio sito ho usato una funzione jQuery chiamata bgFadeResize, che consente di inserire, utilizzando dei div, uno sfondo, che cambi ogni tot millisecondi, al sito.
Funziona tutto molto bene, se non fosse che navigando da smartphone e da tablet questa funzione non viene implementata e quindi mi visualizza le immagini una sotto l'altra. Dato che su tablet e smartphone mi piacerebbe fosse tutto un po' più leggero, ho pensato di fare in modo che venga visualizzato solo uno sfondo che non cambi mai.
Così ho pensato di usare, tramite javascript, il vibility:hidden sulle immagini quando rileva un dispositivo mobile. Il punto è che, provandolo in tutti i modi, le immagini rimangono.

Questo è il mio codice:
<script>
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\s ce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
$(".background").css("visibility", "hidden");
}
</script>


<div id="background">
<img class="background" src="../imgs/Sfondi/Reale/Bg01.jpg" alt="Background 01" title="Background 01" />
<img class="background" src="../imgs/Sfondi/Reale/Bg02.jpg" alt="Background 02" title="Background 02" />
<img class="background" src="../imgs/Sfondi/Reale/Bg03.jpg" alt="Background 03" title="Background 03" />
<img class="background" src="../imgs/Sfondi/Reale/Bg04.jpg" alt="Background 04" title="Background 04" />
<img class="background" src="../imgs/Sfondi/Reale/Bg05.jpg" alt="Background 05" title="Background 05" />
<img class="background" src="../imgs/Sfondi/Reale/Bg06.jpg" alt="Background 06" title="Background 06" />
<img class="background" src="../imgs/Sfondi/Reale/Bg07.jpg" alt="Background 07" title="Background 07" />
</div>

La mia domanda è: sbaglio qualcosa io? Oppure... Esiste un qualcosa che permetta di cambiare a rotazione lo sfondo e che "si blocchi" quando si è su tablet e/o smartphone? Grazie mille ^^