File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes HTML, CSS and JavaScript and the fly likes Transparent Image Overlays using CSS Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Transparent Image Overlays using CSS" Watch "Transparent Image Overlays using CSS" New topic

Transparent Image Overlays using CSS

Corey McGlone
Ranch Hand

Joined: Dec 20, 2001
Posts: 3271
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?


SCJP Tipline, etc.
Yuriy Fuksenko
Ranch Hand

Joined: Feb 02, 2001
Posts: 413
You can have a div with % bg color, than put your image at top left corner of a div using absolute positioning and z-index=10 and that 2 divs with z-index:20 for the text. You would have to play with coordinates though.
Another thing to think about - if the only problem you have is the size of those text blocks, make them some constant height and scrollable.
I agree. Here's the link:
subject: Transparent Image Overlays using CSS
jQuery in Action, 3rd edition