Hi all! I have a pretty interesting problem that I can’t seem to figure out.

I have two background images in two different <div>‘s. The first <div> holds the main repeating background, while the second holds a background that does not repeat. The two are supposed to join together once the non-repeating background ends, allowing for fluid text from one background to the other. Normally, without transparent images, this would work great.

However, this particular layout requires some high quality transparent pngs, and that is posing a problem because I can’t figure out how to get the background to only show up after the non-repeating background has finished.

My first thought, was to use the background-positioning CSS property to achieve this task by setting the vertical property 1038px off the top of the <div>. This doesn’t work, probably because you can’t use a repeating background with this method.

My second thought, was to set up an absolute layer underneath all of the other layers that starts at 1038px off the top (using margin-top: 1038px; or top: 1038px ... however, I need to be able to center the layer with the others, and it needs to have the other layer embedded in it so it expands with the text.

Any ideas?

Check out the source code & design here:

http://novoelle.com/novoelle1/index.html
http://novoelle.com/novoelle1/style.css