Resize immagine [RISOLTO]

[rounder76]

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?

[Fabrizio Fiorita]

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

[rounder76]

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;
         
 }

[Fabrizio Fiorita]

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;

[rounder76]

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


con inherit mostra lo sfondo del container....

[rounder76]

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

[mau_develop]

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

[rounder76]

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?

[rounder76]

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;}

[Fabrizio Fiorita]

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 

[rounder76]

L'ho testata anche su firefox, funziona perfettamente