[ RISOLTO ] adattare immagine di sfondo con dimensione schermo

[Giuseppe63]

Buongiorno a tutti,
ho un problemino che non riesco a risolvere, inerente all'immagine di sfondo per un sito.
Template utilizzato : Tx-Zenith;
Immagine di sfondo con cornice nelle tre posizioni, alto, destra, sinistra.


lo sgradevole risultato di quando utilizzo due schermi di differenti dimensioni, è il seguente:
schermo 16:9 del portatile ho la visione completa dell'immagine di fondo con i tre lati perfettamente contornati,
con lo schermo 17" mi viene restituita l'immagine con solo i contorni alto e sinistra,
se diminuisco la % dello schermo con i tasti CTRL-, l'immagine di sfondo si rimpicciolisce con il contenuto, se aumento la dimensione con CTRL+, scompare il bordo di destra.


domanda: come posso adattare l'immagine di fondo per ogni tipo di dimensione schermo?

dimenticavo di inserire il link al sito è un sito per prove varie.
grazie in anticipo a tutti.

Link all'articolo: http://www.joomla.it/articoli-community-16-e-17-tab/7158-adattare-immagine-di-sfondo-con-dimensione-schermo.html

[Rasjah]

questa potrebbe essere una soluzione banale

#immagine_di_fondo {
  width: 100%;
}

non avendo un link   

[mau_develop]

mmhh no... come fai ad adattare le proporzioni? distorceresti l'immagine, per forza dei pezzi li devi perdere altrimenti devi fare un "gioco" coi css, (come si faceva per usare l'immagine come bordo di un box o per mettere i bordi arrotondati come img)

[Giuseppe63]

ciao Rasjah,
le prove con width già fatte ma non funziona.


ciao M_W_C,
l'idea dei box potrebbe funzionare, dovrò scomporre l'immagine e vedere se riesco a collocare nella posizione esatta le congiunzioni, proverò nel pomeriggio.


la soluzione (se riuscirò a trovarla) verrà inserita immediatamente.


grazie

[Giuseppe63]

Piccolo aggiornamento,
sembra che la soluzione trovata funziona, però prima di confermare sto verificando le modifiche apportate. Appena verificato il tutto sarà presente l'articolo.


saluti

[Giuseppe63]

Rieccomi a voi,
per molti sicuramente era scontata la soluzione da me trovata, però penso che per altri, neofiti o principianti come il sottoscritto, potrebbe tornare utile, ho realizzato un'articolo dove spiego la procedura da me trovata ed adattata al template Tx_Zenith.


Oltre a configurare i parametri di style con la dicitura TRANSPARENT e nessuna immagine di sfondo, ho dovuto apportare modifiche al file : template.css ed al file index.php sempre del template.
Il neo che è rimasto purtroppo è legato alla mancanza di interpretazione del brouser IE, sugli altri funziona.




Il link all'articolo:  http://www.joomla.it/articoli-community-16-e-17-tab/7158-adattare-immagine-di-sfondo-con-dimensione-schermo.html

Se avete suggerimenti per fare interpretare il css a IE sono tutto orecchi.


Saluti

[lucantropo]

Ciao, scusa un paio di domande sulla tua soluzione, i parametri AA, BB e via discorrendo sono propri delle impostazioni di questo template a quanto mi pare di capire, come si lavorare su un template diverso?


I due attributi filter e ms-filter dovrebbero essere specifici per internet explorer 8 e inferiori , quindi dato che nell'articolo dici che la soluzione non funziona con ie a che scopo sono messi?


Grazie per le risposte.

[radu81]

piccolo OT: mi piace come lo chiami quel giocatolo iPhon 

[Giuseppe63]

Ciao, scusa un paio di domande sulla tua soluzione, i parametri AA, BB e via discorrendo sono propri delle impostazioni di questo template a quanto mi pare di capire, come si lavorare su un template diverso?


I due attributi filter e ms-filter dovrebbero essere specifici per internet explorer 8 e inferiori , quindi dato che nell'articolo dici che la soluzione non funziona con ie a che scopo sono messi?


Grazie per le risposte.

Ciao lucantropo,
le coppie AA BB CC DD sono state utilizzate solo per richiamare le quattro tipologie di parametri che vanno inseriti, non sono "propri" del template, ma fanno parte della riga del CSS, in pratica assegnano la posizione dell'immagine e la sua particolarità nel template.


Anche se le versioni IE 8 ed inferiori non interpretano tutti i CSS, perché non inserirlo? magari più avanti potrebbe servire.

[Giuseppe63]

piccolo OT: mi piace come lo chiami quel giocatolo iPhon 

 

[lucantropo]

Ciao lucantropo,
le coppie AA BB CC DD sono state utilizzate solo per richiamare le quattro tipologie di parametri che vanno inseriti, non sono "propri" del template, ma fanno parte della riga del CSS, in pratica assegnano la posizione dell'immagine e la sua particolarità nel template.

Quindi in pratica tu scegliil tipo di "posizionamento" dell'immagine in base alle tue esigenze?

Anche se le versioni IE 8 ed inferiori non interpretano tutti i CSS, perché non inserirlo? magari più avanti potrebbe servire.

Me lo chiedevo perchè la proprietà cover dovrebbe essere supportata di IE 9 e superiori e quindi è un parametro che non dovrebbe servire. Te lo chiedo perchè di solito io uso un css apposito per ie8 ( o meglio usavo ora per ie 8  non sviluppo quasi più siti) con un altro metodo e commenti condizionali, la tua soluzione è meno complicata e mi piacerebbe poterla utilizzare qulle rare volte in cui son costretto a creare versioni per ie8

[Giuseppe63]

Esattamente, inserendo le voci dei parametri, si gestisce la posizione dell'immagine di sfondo, es : no-repeat center center fixed, questo gruppo di parametri mi posizionerà un'immagine di sfondo senza replicarla verticalmente ed orizzontalmente, centrata rispetto al lato sinistro (left) sia lato alto (top), in modo fisso.
ovvero il testo e le immagini contenute nella pagina scrolleranno mentre l'immagine di sfondo non cambierà posizione.
Nell'articolo trovi l'esempio di una immagine di sfondo con le cornici laterali e superiore, se inserivo i quattro parametri : no-repeat center center fixed, avrei avuto come risultato l'immagine non ripetuta, le cornici sarebbero state presenti solamente ai lati e l'effetto scorrimento non ci sarebbe stato.
Per avere le cornici lateralmente e superiore, più l'effetto scorrimento ho inserito i parametri in questo ordine : repeat center top scroll.   Ripete l'immagine, centra in orizzontale, riferimento superiore, scrolla con contenuto.


Anche io avevo in principio considerato i commenti opzionali, però poi ho trovato queste semplici righe e sembra funzionino.

[lucantropo]

Capito tutto, piu o meno uso un metodo simile applicando la funzione cover direttamente sul body senza creare un div apposito, per  ie  si può inserire un'immagine con una classe che abbia un codice css come questo:

Codice: [Seleziona]

.bg{ min-height:768px;
 min-width: 1024px;
width: 100%;
 height: auto;
 position: fixed;
 top: 0px;
 left: 0px;
 z-index:-9999;Sui dispositivi touch non si riadatta ma su ie si.
Grazie per le risposte

[Giuseppe63]

Capito tutto, piu o meno uso un metodo simile applicando la funzione cover direttamente sul body senza creare un div apposito, per  ie  si può inserire un'immagine con una classe che abbia un codice css come questo:

Codice: [Seleziona]

.bg{ min-height:768px;
 min-width: 1024px;
width: 100%;
 height: auto;
 position: fixed;
 top: 0px;
 left: 0px;
 z-index:-9999;Sui dispositivi touch non si riadatta ma su ie si.
Grazie per le risposte

grazie a te,
queste righe potrebbero risolvermi parte del mio problema, le sperimenterò.
Grazie ancora
saluti

[lucantropo]

Son contento ^_^, nel caso non fossi pratico dei commenti condizionali, ti spiego come uso la classe dell'immagine.
Nel css per tutti i browser la imposto con "display:none" mentre in ie con display:block, in modo appunto da renderla visibile solo su ie 8 .
Ciao e grazie ancora.