Supporto volontario e collaborativo per Joomla!® in italiano

Adattare immagine di sfondo con dimensione schermo

Informazioni utiliTemplate responsive con immagine di sfondo bloccata o scorrevole, adattabile automaticamente alle dimensioni di risoluzione del monitor.
L'utilizzo di template responsivi, ovvero quelli di ultima realizzazione per soddisfare le esigenze della visibilità sui vari sistemi di navigazione, ovvero pc, tablet, iPhon, ecc., possono creare dei problemi quando vi è la necessità di inserire un'immagine di sfondo nel template.


Come sapete, inserire il colore di sfondo è abbastanza semplice, in quanto i vari template richiamano nelle impostazioni la riga di scelta del colore.
Per quanto riguarda l'immagine, viene richiesta anche questa opzione, con la differenza che non viene considerato l'adattamento automatico alla dimensione dello schermo, creando lo sgradevole risultato di tagliare o eliminare parte dell'immagine e facendo sgranare la stessa. La soluzione che vi illustro è funzionante sulla maggior parte dei brouser, tranne I.E. in quanto non interpreta correttamente i CSS. Forse nelle versioni dalla 9 in poi verrà implementato tale riconoscimento, ma attualmente non funziona come noi vorremmo.
Per vedere se l'immagine si adatta automaticamente, è sufficente premere contemporaneamente i tasti : Ctrl - oppure Ctrl +, così facendo si diminuirà o aumenterà la dimensione dello schermo e se l'immagine non si modifica, vuole dire che si adatta automaticamente alle dimensioni.
Queste le differenze tra:
zoom 100%
img100x100
zoom 75% [ Ctrl - - ]
img75x100
zoom 125% [ Ctrl + + ]
img125x100
Come si può vedere, si modificano le scritte e le immagini contenute nel template, mentre la cornice facente parte dell'immagine di sfondo rimane invariata.
Per ottenere questo risultato, ho inserito nel template.css alcune righe di comando, richiamandole nel div del file index.php.
Nello specifico ho utilizzato il template Tx_zenith ( free per joomla )
Immagine di sfondo con dimensioni 1440x3028px;
( la larghezza di 1440px è stata definita per i monitor 17" e/o 19", la lunghezza di 3028px è stata definita per dare alla pagina l'effetto scorrevole senza ripetere l'immagine ).
Queste le impostazioni dello style del template, il background-color = TRANSPARENT, background-image = NESSUNA SELEZIONE.
opzioni style tx-zenith
opzioni style tx-zenith
Queste sono le righe inserite nel file template.css che sostituiscono quelle esistenti per il tag html. ( non inserire i caratteri /* e */ per abilitare il codice )
Utilizzo dei parametri :
AA è l'effetto di ripetere o non ripetere l'immagine quando la finestra contenente il testo ha una dimensione superiore in lunghezza rispetto all'immagine di sfondo;
BB è il riferimento a sinistra o la centratura dell'immagine di sfondo;
CC è il riferimento in alto o centratura dell'immagine di sfondo;
DD è la scelta di bloccare o fare scorrere l'immagine di sfondo.
esempio : no-repeat center center fixed;
produrrà il seguente effetto : immagine di fondo ferma, contenuto della pagina ( testo, immagini, link, menu, ecc. ) in movimento.
codice css tx-zenith
Questa la riga di comando inserita nel file index.php del template
codice html div tx-zenith
Come anticipato, queste condizioni di immagine di sfondo che si adatta alle dimensioni dello schermo, è interpretata correttamente da molti brouser, tranne da Internet Explorer, in quanto non riconosce o interpreta in modo errato alcuni codici CSS.

CommentaCommenta questo articolo sul forum