Position: mit Hintergrundbild behoben?

Wenn ich die <!DOCTYPE HTML> auf der Seite hinzufüge, finde ich, dass ich position: fixed; in das CSS hinzufügen muss, damit das Bild als der Hintergrund auf dem "div" erscheint, andernfalls bekomme ich einen leeren, weißen Hintergrund. Warum benötigt diese Position = fixed in diesem Fall?Position: mit Hintergrundbild behoben?

.background_image{ 
    position: fixed; <-----Why is this needed & Why doesn't static work? 
    background: #000 url(../Images/Image.jpg) center center; 
    width: 100%; 
    height: 100%; 
    min-height:100%; 
    background-size: cover; 
    overflow: hidden; 
}

Hier ist das Beispiel HTML. Es gibt offensichtlich andere Elemente innerhalb der div und ich importiere die CSS über einen Link in der Kopfzeile.

<body> 
    <div class="background_image"> 
    </div> 
</body>

Quelle

2016-07-31 TsTeaTime

Dies geschieht, weil height: 100% Werke in position: fixed.Wenn Sie diese Position entfernen, dauert es nicht height. Also, es gibt einen anderen Weg, dies zu tun. Sie können vh Einheiten verwenden. Entfernen Position fixed, und fügen Sie diesen Hintergrund dieses css:

.background_image{ 
    height: 100vh; 
    background: #000 url(../Images/Image.jpg) center center; 
    width: 100%; 
    min-height:100%; 
    background-size: cover; 
    overflow: hidden; 
    }

Quelle

2016-07-31 09:12:22

Dank ... das hat super funktioniert finden. Was ist der richtige Weg, um hier den Hintergrund zu setzen? Fest oder statisch? – TsTeaTime

@TsTeaTime, in diesem Fall lassen Sie es statisch. Background attachment fixed, wird verwendet, um den Paralx-Effekt zu erzielen. –

Die mittlere html, so dass die Seite muss die HTML-5-Regel folgen

VON MDN Css doc

Die Position CSS-Eigenschaft wählt alternative Regeln für Elemente zu positionieren, die für nützlich sein geskriptete Animationseffekte.

Werte

static

Dieses Schlüsselwort das Element das normale Verhalten verwenden kann, das heißt es in seiner aktuellen Position in der Strömung ausgelegt ist. Die Eigenschaften top, right, bottom, left und z-index gelten nicht.

relativ

Dieses Schlüsselwort alle Elemente legt, als ob das Element wurden nicht positioniert, und dann die Position des Elements anzupassen, ohne Änderung Layout (und damit eine Lücke für das Element verlassen, wo es hätte wurde nicht positioniert). Die Auswirkung von position: relativ auf Tabelle - * - Gruppe, Tabellenzeile, Tabellenspalte, Tabellenzelle und Tabellenbeschriftung Elemente ist nicht definiert.

absolute

Sie nicht Platz für das Element verlassen. Positionieren Sie es stattdessen an einer spezifizierten Position relativ zu seinem nächstliegenden Vorgänger, oder auf andere Weise relativ zum ursprünglichen umschließenden Block. Absolut positionierte Boxen können Ränder haben, und sie kollabieren nicht mit anderen Rändern .

Fest

Sie für das Element nicht Raum verlassen. Positionieren Sie es stattdessen an einer angegebenen Position relativ zum Ansichtsfenster des Bildschirms und verschieben Sie es beim Scrollen nicht . Beim Drucken, positionieren Sie es an dieser festen Position auf jeder Seite. Dieser Wert erstellt immer einen neuen Stapelkontext. Wenn ein Vorfahr der etwas gesetzt verwandeln Eigenschaft hat anders als keine so wird dieser Vorfahre als Container anstelle des Ansichtsfenster verwendet