Responsive ganzseitige Bild (100% Höhe)

Question

Obwohl es viel Inhalt zu diesem speziellen Thema gibt, habe ich die Hinweise von anderen vergeblich versucht.

Ich habe ein div mit der id = headerimg wie hier zu sehen ist: -

https://jsfiddle.net/9d3bmpxc/1/

wie Sie sehen können Ich habe die gemeinsame CSS für ein volle Breite ansprechenden Bild verwendet: -

#headerimg { 
    background: url(http://www.adamoxenhamsmith.co.uk/site/img/NewYork.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

Wie Sie in der JSFiddle-Verknüpfung sehen, reagiert mein Bild nicht. Selbst wenn ich die Mindesthöhe auf 100% setze, passiert nichts.

Bitte beachten Sie auch, dass die vier Punkte oben mein Nav anzeigen, das nicht gestylt ist.

Ihre Hilfe wird sehr geschätzt.

Answer 1

Wenn Sie die Höhe eines Elements auf 100% setzen möchten, müssen Sie auch die Höhe des übergeordneten Elements (in diesem Fall des Körpers) festlegen. Wenn Sie height: 100% zu Ihrem #headerimg Elemente und die folgende in der CSS hinzufügen:

html, body { height:100%; } 

Dies sollte Ihr Bild mit voller Höhe anzuzeigen.