Immagine di sfondo reattiva Bootstrap

Question

Come si crea, usando il bootstrap, un div holder con come sfondo un'immagine da adattare ai visitatori? L'immagine ha un'altezza e una larghezza fisse. Se lo schermo è più piccolo dovrebbe essere ridimensionato per non avere x, y overflow.

Answer 1

Si potrebbe usare background-size come questo:

div.someclass { 
    background-size: cover; 
} 

C'è un buon articolo da @Chris Coyier mostrando alcune tecniche: http://css-tricks.com/perfect-full-page-background-image/

Answer 2

non sto molto esperto in Bootstrap, ma penso che non esiste caratteristica. Ti consiglio di creare il tuo "tema Bootstrap", un puro file CSS o LESS per personalizzare il tuo background.

Si potrebbe semplicemente utilizzare:

body 
{ 
    background: url(https://www.google.hu/images/srpr/logo4w.png); 
    background-size: cover; 
} 

Questo codice allunga l'immagine di sfondo in entrambe le dimensioni, ma taglia alcune parti dell'immagine, a meno che la razione schermo è la stessa come il rapporto dell'immagine.

body 
{ 
    background: url(https://www.google.hu/images/srpr/logo4w.png) no-repeat center center fixed; 
    background-size: cover; 
} 

Answer 3

questo ha funzionato per me:

body{ 
     background-image: url('../url') ; 
     background-position: center; 
     background-repeat: no-repeat; 
     background-size: cover; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     height:100%; 

    } 

Answer 4

In primo luogo, per l'immagine di sfondo:

div.someclass{ 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

Questo renderà la vostra immagine di sfondo reattivo, vale a dire che si adatta in base alle dimensioni della il display su cui è visualizzata la pagina.

In secondo luogo, per mantenere il contenuto principale forma un margine adeguato dall'alto su qualsiasi dispositivo è quello di dare il div appena creato per il contenuto principale di un relativo margine sulla parte superiore:

div.someclass{ 
margin-top:5%; 
} 

cambiamento di cui sopra 5% secondo il vostro requisito

Answer 5

body { 
    background="imagename.jpg"; 
    }