Come utilizzare l’immagine di sfondo retriggers in css3 in bootstrap

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.

Per lo sfondo dell’immagine, controlla 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; } 

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

dimostrazione

Demo 2 (Non si allungherà, questo è quello che stai facendo)

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


Tuttavia, l’immagine si allungherà, non sarà retriggers, se si desidera allungare lo background proporzionale, è ansible cercare le background-size: cover; ma IE creerà problemi per voi in quanto è proprietà CSS3, ma sì, è ansible utilizzare CSS3 Pie come polyfill. Inoltre, l’uso della cover taglierà la tua immagine.

Ho trovato questo:

Pieno

Un modello di sfondo delle immagini a pagina intera facile da usare per i siti Web Bootstrap 3

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

o

usando nel tuo contenitore principale:

html

 

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

Controllalo,

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

Il percorso del file 'images/ip-box.png' implica che il file css si trovi allo stesso livello della cartella delle immagini.

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

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

Prova questo:

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

Imposta sfondo reattivo e user friendly