Warum funktioniert Min-height nicht im Hintergrund?

Ich habe einen Hintergrund zu einer Div-Klasse hinzugefügt. Ich möchte, dass die Bildhöhe immer die gleiche Höhe wie das Browserfenster hat, was ich mit min-height = 100% erreichen wollte. Ich bekomme es aber nicht zur Arbeit .. Irgendwelche Vorschläge?Warum funktioniert Min-height nicht im Hintergrund?

HTML:

<div id="top" class="jumbotron"> 
</div>

CSS:

.jumbotron { 
    background: no-repeat center center url('top.jpg'); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    min-height: 100%; 
    margin: 0px; 
}

Quelle

2016-11-10 Jonas El-Mansoury

Sie können sicher die Präfixe fallen ... außer natürlich möchten Sie die 0,2% der Menschen unterstützen, die einen veralteten Browser laufen;) http://caniuse.com/#search= background-size – Christoph

Der Körper und der html haben die 100% Höhe zu füllen:

html, body { 
    height: 100% 
}

Quelle

2016-11-10 20:08:48 quindimildev

Funktioniert immer noch nicht .. Nur die oberen ~ 100 px des Bildes wird angezeigt. –

Könntest du eine Geige schreiben? – quindimildev

https://jsfiddle.net/jonelm01/znu8k7qn/ Schätzen Sie die Hilfe! gerade angefangen zu codieren –

Fügen Sie diese auf Ihre jumbotron Klasse:

min-height: 100vh;

Arbeits Geige: https://jsfiddle.net/dgo3sz0a/

Quelle

2016-11-10 20:18:13 Cromwell

Warum funktioniert Min-height nicht im Hintergrund?

Antwort

Verwandte Themen