Wenn Sie ein Header-Bild haben möchten, dessen Größe den gesamten Header abdeckt, aber auch den Hintergrund-Anhang fixieren soll, wird das Hintergrund-Bild nicht länger das enthaltene div abdecken, sondern versuchen, das gesamte Fenster abzudecken / p>
Hier ist eine Geige, die das Problem zeigt. Schalten Sie einfach die Empfehlung von Zeile 13 im CSS um. Wenn Sie zu wechseln Ссылка
%Vor%background-attachment ist standardmäßig 'scroll'. Also mit "fixed" auskommentiert das Katzenbild auf die Form der oberen linken Box ohne Problem, aber mit "fixed" bleibt der Katzenhintergrund auf der Seite fixiert, aber die Katzenbildgröße "bedeckt" dann die ganze Seite.
Idealerweise möchte ich den Header hier neu erstellen: Ссылка
Aber mit dem Header auf 50% der Seitenhöhe gesetzt. Es funktioniert in diesem Beispiel, weil die Kopfzeile eine ganze Seite ist.
Dies scheint mit dem Standard kompatibel zu sein, da alle modernen Browser dasselbe zu tun scheinen, aber ich kann nicht verstehen, warum es sich so verhält?
Dies liegt daran, dass durch Festlegen von background-attachment: fixed der Hintergrundpositionierungsbereich auf den ursprünglichen umschließenden Block geändert wird, der immer die Größe des Ansichtsfensters aufweist. Aus der Spezifikation :
Wenn der 'background-attachment' Wert für dieses Bild 'fixed' ist, dann hat [die 'background-origin' Eigenschaft] keinen Effekt: In diesem Fall ist der Hintergrund-Positionierungsbereich der Initial containing block [CSS21].
Das Verhalten von background-size: cover wird dann entsprechend beeinflusst.
Sie können immer noch das gewünschte Verhalten mit einem festen Hintergrund erreichen , indem Sie stattdessen background-size: auto 50% einstellen, sodass die Höhe skaliert wird 50% der Seite, die die Höhe widerspiegelt, die Sie dem Element gegeben haben, und seine Breite wird skaliert:
Beachten Sie, dass ich auch die Standarddeklaration background-size nach unten verschoben habe, um sicherzustellen, dass alle Browser diese Version über die nicht standardmäßigen Implementierungen verwenden, sofern verfügbar.
Tags und Links html css css3 background-image