延伸到页面高度的:: after和:: before伪元素的背景图像

Question

I have a <div class="page"> centered at my page, and I'd like to have two background images running along the left and right edge of this element.

I've set up the .page::before and .page::after pseudo-elements and they seem to work great, but the background images repeat themselves up to the end of the visual viewport and not the whole page.

I've tried several things, playing with the position:... of the div , or setting height: 100% to html and/or body but to no avail.

I've made a JsFiddle demo here to illustrate the problem. Ideally, I'd like not to mess with the html markup.

Any ideas?

EDIT : Including the markup and css here for future reference.

HTML :

<div class="page">__long content here__</div>

CSS

.page {
    background-color: white;
    width: 400px;
    margin: 0 auto;
    padding: 1em;
}

.page::before {
    content: '';
    background-image: url(__some background image__);
    position: absolute;
    width: 94px;
    height: 100%;
    top: 0;
    margin-left: -100px;
}

.page::after {
    content: '';
    background-image: url(__some background image__);
    position: absolute;
    width: 94px;
    height: 100%;
    top: 0;
    margin-left: 995px;
}

Answer 1

Positioning .page relatively seems to work :

.page {
    position: relative;
    background-color: white;
    width: 400px;
    margin: 0 auto;
    padding: 1em;
}

Without it, the height: 100% on its pseudo-elements refers to the height of the viewport instead because they are absolutely-positioned.