:: vor und :: nach funktioniert nicht

Question

Ich versuche, diese beiden Objekte auf dem Bildschirm Benutzer zu beheben. Bitte beachten Sie, dass ich dies nur mit CSS ändern kann, so dass der HTML nicht bearbeitet werden kann! Dies ist ein CSS zen garden Beispiel (basierend auf den 90er Jahren) Ich versuche (was kurz gesagt bedeutet, dass Sie ein Design basierend auf eine feste hTML-Datei, so dass Sie ‚zeigen‘, welche CSS-fähig ist ausgeschaltet.)

Sie hier ein anschauliches Beispiel finden. http://lucasdebelder.be/zengarden/index.html

bekam ich die Top-fixierte und Arbeits mit folgenden Syntax.

body::before { 
    content: ''; 
    position: fixed; 
    width: 100%; 
    height: 12.5%; 
    background: url(header_browser.svg); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    z-index: 5000; 
    background-size: 100%; 
} 

Ich versuchte dann die :: nach Aussage über den Körper. Aber das funktioniert nicht, wie kann ich das untere Bild (Fußzeile) auf den Boden geklebt bekommen?

body::after { 
    content: ''; 
    position: fixed; 
    width: 100%; 
    height: 12.5%; 
    background: url(footer_browser.svg); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    z-index: 5000; 
    background-size: 100%; 
} 

Answer 1

Lassen Sie Ihre ::before Pseudo-Element, um die oben in 0 steigen.
Sagen Sie Ihrem ::after Pseudo-Element, dass es bei 0 nach unten geht.

body::before { 
 
    content: ''; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 12.5%; 
 
    background: #0f0; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    z-index: 5000; 
 
    background-size: 100%; 
 
} 
 

 
body::after { 
 
    content: ''; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 12.5%; 
 
    background: #f00; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    z-index: 5000; 
 
    background-size: 100%; 
 
}