I’ve got a project where the client wants content areas to sit on a paper-like background. The main part is basically solid, the top and bottom edges are torn paper, done as transparent PNG files so that the page background shows through. I thought that I’d use CSS3 multiple backgrounds and after a slight bit of fiddling have the top and bottom edge images placed just fine. What I want to do for the area in between is to use a repeating image that starts at the bottom edge of the top image and stops at or slightly below the top edge of the bottom image.
And for the life of me, I can’t see how to do this. The top edge image is 50px tall, so I thought I’d define the background-position of the content area to start 50px below the top edge of the div… but that’s not working. background-origin doesn’t seem to work either… The main area image is simply filling the entire div and this appearing as a background to the transparent PNGs at the top and bottom edges.