Qual è la prassi migliore per impostare un'immagine di sfondo centrato e il 100% (in modo che riempie lo schermo, ma ancora mantiene le proporzioni) in tutti i browser?sfondo immagine centrata e al 100% in tutti i browser
Prelevare un vecchio post, poiché esiste un nuovo metodo per farlo con un buon supporto del browser.
Usa background-image come questo:
background-size:cover;
background-position:center;
Questo non distruggerà le proporzioni dell'immagine, ma scalare nel miglior modo possibile, senza mai mostrare le barre nere (o che cosa mai sarebbe in background).
Il supporto del browser è quasi perfetto come potete vedere su Can I use it?. Opera Mini potrebbe essere un problema, ma il browser sarà probabilmente presto sostituito da Vivaldi.
In conclusione, penso che questa sia sicuramente la strada da percorrere, poiché è di gran lunga la soluzione più pulita e affidabile e molto semplice da modificare anche con JS.
Grazie per aver aggiornato un thread precedente. Questo è anche il modo in cui lo faccio oggi. – jamietelin
Non so come ottenere ciò impostandolo come immagine di sfondo. Tuttavia si potrebbe avere un immagine che viene posizionato in modo assoluto
<div style="position:absolute; left:0;right:0;bottom:0;top:0;display:table;vertical-align:middle;text-align:center">
<img style="max-width:100%; max-height:100%" />
</div>
Cosa significa 'display: table;'? – ANeves
per l'allineamento verticale al lavoro. può anche essere visualizzato: cella di tabella – Kasturi
Non penso che sia necessario per l'allineamento verticale per funzionare, l'allineamento verticale dovrebbe funzionare su qualsiasi elemento in linea: http://www.htmldog.com/reference/ cssproperties/vertical-align/ – ANeves
Si potrebbe usare CSS3 background-size property, ma non sono sicuro quanto bene è supportato. Credo che la maggior parte di loro lo fanno, ma con prefisso:
-o-background-size
-webkit-background-size
-khtml-background-size
La pratica migliore è quella di non di fare quello che vuoi fare.
Specificando il 100% si allungherà (quindi distorcerà) l'immagine.
Il modo migliore per avere un semplice, sfondo centrato è come questo:
body {
background-image:url(Images/MyBG.png);
background-position:center top;
background-repeat:no-repeat
}
EDIT:
Ora è possibile target differenti risoluzioni e utilizzare un'immagine di sfondo diverso, a seconda delle dimensioni specificando un foglio di stile dipendente dalla risoluzione. È possibile utilizzare fogli di stile separati solo per definire l'elemento di uno sfondo con file diversi in ciascuno.
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
Il problema con questa soluzione è che ho bisogno di fare molte, molte immagini con diversa risoluzione. – jamietelin
Questo è un ottimo post su due metodi per ottenere questo look:
Ho fatto una versione modificata di Technique # 2, funziona come Okey, controllo la mia risposta alla domanda. – jamietelin
migliore soluzione sono riuscito a fare finora è la seguente;
//CSS
<style type="text/css">
body {
margin:0; padding:0;
}
html, body, #bg {
height:100%;
width:100%;
}
#bg {
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
z-index:0;
}
#bg img {
width:100%;
min-width:100%;
min-height:100%;
}
#content {
z-index:1;
}
</style>
//HTML
<body>
<div id="bg">
<img style="display:block;" src="bgimage.jpg">
</div>
<div id="content">
//Rest of content
</div>
</body>
Potrebbe essere il modo migliore? Qualcuno vede qualche problema nel farlo in questo modo?
Grazie per il vostro tempo!
Che cos'è "tutti i browser"? Include IE6? (Per il tuo bene, meglio non.) – ANeves
No, ma tutti i browser aggiornati :) Quindi, IE8, Firefox 3, Safari 4 e così via ... e con tutti i significati tutti i principali browser non Camino, Miro e presto. – jamietelin