So my wife and I have been working on revamping our personal webpage and ran across a problem that we can't quite figure out how to deal with. The layout we're trying to work with uses a large photo in the background. The bottom of the photo is
grass so, near the bottom of the image, we created a gradient so that the photo fades from the grass color to a solid green, which is used as the background for the rest of the page. Our goal is to create two columns of a gray "overlay" that can be used to place text in. We want the background (whether that's the photo or the plain green) to show through that gray overlay, to some extent - I'd like the gray overlay to be at about 75% alpha, so that the background is more of a "watermark" and doesn't interfere with the text.
If that's as clear as mud, here's a little diagram that, hopefully, will lend some insight into what this layout looks like:
In that gorgeous picture, imagine that the 'X' marks represent photo background. The 'V' marks represent the area where the gradient fades the photo to green. The '%' marks is solid green background. The two openings are the gray overlays I'd like to put the text into.
So here's the thing. If I just go into Photoshop, I can make that entire background (the photo + gradient + green background + overlays) out of a single image. The problem with that, of course, is that, if the amount of text to be displayed changes, I need to recreate that background image - I'd rather just extend the gray overlays.
Unfortunately, I'm at a loss for how to do this with CSS. I could use a DIV for the top half which uses a background of the photo with a gray overlay on it and then another DIV for the bottom half with a repeating background, which is just the green background color with the gray overlay. That might work, but it doesn't seem very flexible. For one thing, I'd need to split my content (which would really all go together) into two successive DIV's.
Anyone have any good ideas of how to tackle this?
Thanks,
Corey