I've successfully centered a <div class="page"> element on my page, and now I'm attempting to add two background images that run along the left and right edges of this container.
So far, I've utilized the .page::before and .page::after pseudo-elements, but I'm encountering an issue where the background images repeat only up to the end of the visible viewport, rather than spanning the entire page.
Despite experimenting with various CSS properties like position:... on the div, as well as applying height: 100% to both html and body, I haven't been able to resolve the problem.
To better showcase the issue, I've created a JsFiddle demo here. Ideally, I'd prefer not to modify the existing html structure.
Any suggestions or solutions?
EDIT: Below is the HTML and CSS markup for easy 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;
}