Immagine di sfondo centrato e al 100% in tutti i browser

StackOverflow https://stackoverflow.com/questions/2803479

  •  25-09-2019
  •  | 
  •  

Domanda

Qual è la prassi migliore per impostare un'immagine di sfondo centrato e il 100% (in modo che riempie lo schermo , ma ancora mantiene il rapporto di aspetto ) in tutti i browser?

È stato utile?

Soluzione

Sollevare un vecchio post, poiché non v'è un nuovo metodo per farlo con un buon supporto del browser.

Usa background-image in questo modo: 

background-size:cover;
background-position:center;

Questo non distruggere le proporzioni dell'immagine, ma scala nel miglior modo possibile, senza mai mostrare alcun barre nere (o che cosa mai sarebbe in sottofondo).

il supporto del browser è quasi perfetto come si può vedere su Posso usarlo? . Opera Mini potrebbe essere un problema, ma il browser sarà probabilmente sostituito da Vivaldi al più presto.

In conclusione penso che questo è sicuramente la strada da percorrere, dal momento che è di gran lunga la soluzione più pulita e più affidabile e molto facile da modificare con JS pure.

Altri suggerimenti

La soluzione migliore 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 questo modo migliore? Chiunque vede alcun problema con il fare in questo modo?

Grazie per il vostro tempo!

La pratica migliore è quella di non per fare quello che vuoi fare.

Specificando al 100% che si sta per tratto (quindi distorcere) l'immagine.

Il modo migliore per avere un semplice, sfondo centrato è in questo modo: 

body {
    background-image:url(Images/MyBG.png);
    background-position:center top;
    background-repeat:no-repeat
}

Modifica

Ora è possibile target differenti risoluzioni e utilizzare un'immagine di sfondo diverso, a seconda delle dimensioni specificando un foglio di stile risoluzione-dipendente. È possibile utilizzare i fogli di stile separati solo per definire l'elemento uno sfondo con diversi file in ogni. 

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

See: http://css-tricks.com/resolution-specific-stylesheets/

o il supporto CSS del W3C interrogazione spec .

Questo è un ottimo post su due metodi per ottenere questo look:

http://css-tricks.com/perfect-full- pagina-background-image /

Non so come raggiungere questo impostando 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>

Si potrebbe usare CSS3 background-size proprietà , ma io non sono sicuro di come bene è supportato. Credo che la maggior parte di loro lo fanno, ma con il prefisso: 

-o-background-size
-webkit-background-size 
-khtml-background-size
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top