How to properly position a three-part background

Question

What I tried:

#page-text {
background-image: 
    url(./images/paper-top.png),
    url(./images/paper-bottom.png),
    url(./images/paper-mid-2.png);
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: 0 0, 0 100%, top 10px;

background-size: 100% auto;  
}

Unfortunately the repeating part repeats all over #page-text and since paper-top is partly transparent, paper-mid-2 is visible in those transparent parts. For illustration notice the top corners of the paper (or see the live version) background screenshot

Hav a look at the second anser in this question: http://stackoverflow.com/questions/5427371/multiple-background-images-and-a-background-color/5427455#5427455. This could give you a hint. I suggest that you wrap the actual text in another div so you can get rid of the large padding. — mainguy, Feb 23 '14 at 13:07

score 1 · Accepted Answer · answered Feb 23 '14 at 13:05

You are probably better off dividing #page-text into three vertical sections. A nice way to do that without extra HTML is to use :before and :after on #page-text, holding the top and bottom background images and placed above and below #page-text respectively. That way, you can let the middle background image repeat as much as needed without interfering with the top and bottom background images. You also then don't need CSS3, thus providing a more backward-compatible solution.

How to properly position a three-part background

1 Answers1