Cambiare background-image con effetti di transizione

[Uliano]

Ciao a tutti, ho 4 immagini di background che vorrei alternare sulla home creando una transizione semplice di sovrapposizione tra una e l'altra sullo stile delle gif animate.
Ho provato con l'immagine gif, ma risulta di dimensioni troppo elevate per un sito. Su dimensioni accettabili la qualità dell'immagine diventa scadente.



Nel template.css ho trovato queste righe in cui vengono definite le caratteristiche dell'immagine di background:


*/#jf-slideshow {    background-clip: border-box;    background-color: #00446D;  background-image: url(../images/banner.jpg);  background-origin: padding-box;    background-position: center center;    background-repeat: no-repeat;  background-size: cover !important;    -webkit-background-size: cover !important;    -moz-background-size: cover !important;    -o-background-size: cover !important;  background-attachment: local;    position: relative;    z-index:50;}


E' possibile modificarle per ottenere il mio scopo.
Grazie in anticipo per le risposte.
Fabio

[Uliano]

Non c'è nessuno che mi sa aiutare?:-(


Mi spiego meglio:
Ho 4 immagini banner.jpg, banner2.jpg, banner3.jpg, banner4.jpg.
Vorrei che si alternassero a distanza 5/7 sec. una dall'altra con una transizione tipo "fade".


L'elemento in template.css che gestisce l'immagine di background a tutto schermo e responsive è questo:

#jf-slideshow {   
      background-clip: border-box;
      background-color: #00446D;
      background-image: url(../images/banner.jpg);
      background-origin: padding-box;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover !important;
     -webkit-background-size: cover !important;
     -moz-background-size: cover !important;
     background-attachment: local;
     position: relative;
     z-index:50;}

Cosa devo modificare o aggiungere per ottenere il mio scopo?

Ho già provato con diversi moduli slideshow, ma non ci salto fuori...
Spero che qualcuno possa aiutarmi

[maicolstaip]

Ciao Uliano,
questo dovrebbe fare quello che ti aspetti:
http://extensions.joomla.org/extensions/style-a-design/page-background/18847

Ciao!

[Uliano]

Grazie mille Maicolstaip!
Con la tua indicazione è quasi perfetto.
Ho solo un problema con il footer...
Per visualizzare lo slideshow, ho dovuto impostare nello script del template.css "background-color: transparent" ed ho dovuto cancellare "background-image: ...".
Facendo così, però, mi esce l'immagine del footer e i pulsanti social che dovrebbero comparire solo quando arrivo sul fondo (questo è il sito www.fabioulianograsselli.com).
Guardando il template.css la posizione "slideshow" in cui ho inserito il modulo ha z-index: 50, mentre la posizione "footer" ha z-index: 0 (spero di aver usato la terminologia giusta.
Nonostante ciò gli elementi del footer sono in primo piano sullo slide show.
C'è qualche modo di metterli dietro come succedeva prima?
Grazie ancora