Hi, I have a background image that I attached to a wrapper div to provide a repeating background as my site expands vertically. Nothing new there. This image is 760x3 px for the repeat.
The overall goal is that the site starts with a solid green background through the <branding> div and the first (let's say..) top half of the left and right divs, then transitions from green to black through the bottom half of the left and right divs, and is solid black in the very bottom of the left and right column content (as it expands) in the footer div. So there's actually possibly 3 images: 1) a green image, 2) a green- transitioning to black image 3) a black image, all of which would need to repeat vertically in the appropriate places. Here's my layout of div's. It's a two column layout where the left and right divs are floated, and the footer is cleared. <wrapper> <branding> <left> <right> <footer> </wrapper> I attached the repeating background image to the wrapper, but obviously it's all green with no transition. I tried but, it's not as simple as 1) green for the branding 2) transition green to black image for the left and right divs 3) black for the footer. 1) and 3) are easy -- I can slice the divs with the appropriate background images. The problem is that for 2), the transition from green to black should occur over 100-200px, and if the layout expands, as the text in the columns expands, then I'd be repeating the transition image for a much larger -- say 600px. And 600px is clearly too much for a color transition. That's where I get stuck. The branding and footer are fixed heights, but the floated left and right divs need to be able to expand vertically as the content expands. Any advice is much appreciated. Thanks in advance, R --~--~---------~--~----~------------~-------~--~----~ -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected] -~----------~----~----~----~------~----~------~--~---
