Background -> How to auto expand a background that can’t be repeated on the -y?

[alston]

Hello,
I have as a background a document I created in photoshop that is is like vintage poster paper that will be posted over a brick background.

Questions is, the top and bottom of the poster have tape and corner-roll details that won’t allow for a repeat-y. Any ideas that will enable the top and bottom detail to stay the same but expand only the middle portion of the paper as the content expands page to page.?

This is the background poster I need to expand.

[TheDoc]

For the most browser compatibility, you’re unfortunately just going to have to use some useless divs and have three separate backgrounds. I haven’t delved too far into the multiple background stuff in CSS3.

[noahgelman]

Cut the image into 3 pieces and use 3 divs. The background of the top is the top of the paper. The background of the middle div is is a chunk of the middle part of the paper repeated vertically. And the background of the last div is the bottom of the paper.

[joshuanhibbert]

You can use pseudo elements to do this, without requiring additional, non-semantic, markup, but it won’t work in IE7.

[Author]

Posts