The best way for you to receive some feedback here is to post the image for us to see. It's hard to visualize this without seeing the background.
On Dec 29, 10:25 pm, Ranginald <[email protected]> wrote: > 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] -~----------~----~----~----~------~----~------~--~---
