::before and ::after doesn't work - html

Question

I'm trying to get these two objects fixed on the users screen. Please note that I can only modify this with using CSS so the HTML can't be edited!, this is a CSS zen garden example (based on the '90s) I'm trying (which means in short you make a design based on a fixed html file so you can 'show off' what CSS is capable off.)
You can find a live example here.
http://lucasdebelder.be/zengarden/index.html
I got the top fixed and working with the following 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%;
}
I then tried the ::after statement on the body. But that doesn't work how can I get the bottom image (footer) sticked to the bottom?
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

Tell your ::before pseudo element to go up the top at 0.
Tell your ::after pseudo element to go down the bottom at 0.
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%;
}