Come utilizzare l'immagine di sfondo reattiva in css3 nel bootstrap

Question

Non voglio usare il tag html. Questo è il mio css. Sto usando Bootstrap 3.0.

background:url('images/ip-box.png')no-repeat; 
background-size:100%; 
height: 140px; 
display:block; 
padding:0 !important; 
margin:0; 

Lo zoom al 100% è OK. ma quando ingrandisco il 180% circa, l'immagine sarà corta dall'alto e dal basso, voglio alcuni trucchi css.

Answer 1

Per sfondo pieno di immagini, controllare questo:

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

Answer 2

È necessario utilizzare background-size: 100% 100%;

Demo

Demo 2 (non si allungheranno, questo è quello che stai facendo)

Spiegazione: È necessario utilizzare 100% 100% come set per X AS Y, si imposta 100% solo per il parametro X, quindi lo sfondo non si estende verticalmente.

---

Eppure, l'immagine verrà allungare, non sarà reattivo, se si vuole allungare il background in proporzione, si può cercare background-size: cover; ma IE creerà problemi per voi qui come è proprietà CSS3, ma sì, puoi usare CSS3 Pie come polyfill. Inoltre, utilizzando cover si ritaglia l'immagine.

Answer 3

check this out,

body { 
    background-color: black; 
    background: url(img/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Answer 4

percorso Il file 'images/ip-box.png' implica che il file CSS è allo stesso livello delle immagini della cartella .

Probabilmente è più comune avere le cartelle 'images' e 'css' allo stesso livello del file 'index.html'.

Se così fosse e il file css erano di un livello verso il basso nella rispettiva cartella, quindi il percorso di ip-box.jpg come specificato nel file css sarebbe: '../images/ip-box.png'

Answer 5

ho trovato questo:

pieno

Un facile da usare, pagina intera modello immagine di sfondo per Bootstrap 3 siti

http://startbootstrap.com/template-overviews/full/

o

utilizzare nel vostro div contenitore principale:

html

<div class="container-fluid full"> 


</div> 

css:

.full { 
    background: url('http://placehold.it/1920x1080') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
    height:100%; 
} 

Answer 6

Set reattivo e facile da usare Sfondo

<style> 
body { 
background: url(image.jpg); 
background-size:100%; 
background-repeat: no-repeat; 
width: 100%; 
} 
</style> 

Answer 7

Prova questo:

body { 
    background-image:url(img/background.jpg); 
    background-repeat: no-repeat; 
    min-height: 679px; 
    background-size: cover; 
}