Bootstrap CSS: Zentraler Hintergrund, volle Höhe, abgeschnittene Breite

Question

Derzeit, wenn mein Browser halb so groß ist wie der Monitor, wird der Hintergrund verkleinert, um die Breite anzupassen, die Höhe und die Unterseite abgeschnitten. Ich mag würde es stattdessen die Höhe halten, die ganze Seite füllt, und das Seitenverhältnis zu halten, aber gerade das Fotos Zentrieren und die Seiten des Fotos, mein aktuelles CSS ist nur

body{ 
    background-image: url("/background1.jpg"); 
    background-size: 100%; 
    background-repeat:no-repeat; 
    display: compact; 
} 

Jede Hilfe abschneidet auf, wie man das macht, wäre toll, danke

Answer 1

Hinzufügen background-size: cover sollte das Clipping und das Seitenverhältnis beibehalten.

Durch Hinzufügen von background-position: center; bleibt das Bild in der Mitte.

(Regel für div ersetzen und legen Sie es auf Ihr body - ich verwendet div hier für den Beispielcode nur)

Siehe Lauf Probe unter

div { 
 
    background-image: url("http://placehold.it/1000/1000"); 
 
    /* Resizes image to fill div; retains aspect ratio. */ 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    min-height: 2000px; 
 
}

<div> 
 
    Lorem Ipsum 
 
</div>

Answer 2

background-size: cover; 

Sollte tun, was Sie brauchen. Griffe schneiden/skalieren ziemlich elegant.

Answer 3

background-size: auto 100%; Verwendung in dieser Regel:

body { 
    background: url("/background1.jpg") center center no-repeat; 
    background-size: auto 100%; 
} 

Der erste Parameter (in background-size) die Breite, die zweite ist die Höhe des Bildes. Wenn es nur einen Parameter gibt (wie in Ihrer Regel), nimmt der Browser an, dass es sich um die Breite handelt und legen Sie die Höhe auf auto fest. Meine Version sollte Ihnen die volle Höhe geben und die Breite automatisch anpassen (und das Bild zentrieren).