CODEWITHSUNDEEP
htmlcss
lalibi
lalibi

Reputation: 3078

Background image for ::after and ::before pseudo elements that extend to the height of the page

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;
}

Upvotes: 0

Views: 869

Answers (1)

BoltClock
BoltClock

Reputation: 724142

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.

Upvotes: 5

Related Questions