Joomla.it Forum

Joomla! 3 => Joomla! 3 => : rounder76 17 Jun 2014, 01:17:49

: Resize immagine [RISOLTO]
: rounder76 17 Jun 2014, 01:17:49

Creando un template da zero, come posso inserire nell'header, la cui larghezza è definita in % nel css, un immagine che va ad adattarsi automaticamente alle dimensioni dell'header?

: Re:Resize immagine
: Fabrizio Fiorita 17 Jun 2014, 17:55:12

Ciao.
Puoi provare dando all'immagine l'attributo width:auto; oppure width:inherit;

: Re:Resize immagine
: rounder76 17 Jun 2014, 18:30:14

dove devo dare l'attributo??


Questo è l'header nel mio css:



#header{ width:850px;
         height: 300px;
         margin-left:auto;
        margin-right:auto;
         background-image:url(../images/campo.jpg) width:auto;
         border: 1px solid black;
         box-shadow: 10px 10px 5px #000000;
         
 }

: Re:Resize immagine
: Fabrizio Fiorita 17 Jun 2014, 18:46:37

C'è già width:auto; (riga di background-image), ma dovrebbe indicare che l'immagine viene mostrata nelle proprie dimensioni.
Prova a sostituire auto; con inherit; oppure a togliere proprio l'attributo width:auto;

: Re:Resize immagine
: rounder76 17 Jun 2014, 18:50:45

con o senza width auto mi taglia l'immagine, cioè ne mostra solo una parte


con inherit mostra lo sfondo del container....

: Re:Resize immagine
: rounder76 17 Jun 2014, 18:53:01

io sto mettendo un immagine 1100x500 in un header 850x300...


vorrei che si adattasse in automatico tutta l'immagine e se fosse per esempio 700x250 vorrei che in automatico coprisse tutto l'header

: Re:Resize immagine
: mau_develop 17 Jun 2014, 20:21:36

... le immagini si scalano in proporzione oppure te ne taglia una fetta... è matematico

: Re:Resize immagine
: rounder76 17 Jun 2014, 22:30:06

ok grazie, ma allora se metto una immagine di sfondo nel body in uno schermo ad alta risoluzione mi trovo sempre una fascia bianca perchè l'immagine non copre tutto lo spazio.


come risolvo?

: Re:Resize immagine
: rounder76 17 Jun 2014, 23:37:10

ho risolto cosi



* { margin: 0; padding: 0; }
   
   html {background: url(nome_immagine.jpg) no-repeat center center fixed;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;}

: Re:Resize immagine [RISOLTO]
: Fabrizio Fiorita 17 Jun 2014, 23:52:29

Grazie per l'informazione.
Dato che uso prevalentemente Firefox non conoscevo l'istruzione background-size, che per FF ancora non è standard.
Copio ed userò.
Se ne impara una ogni giorno  ;D

: Re:Resize immagine [RISOLTO]
: rounder76 18 Jun 2014, 00:00:12

L'ho testata anche su firefox, funziona perfettamente  :D