Win a copy of Rust Web Development this week in the Other Languages forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
  • Tim Cooke
  • Campbell Ritchie
  • Ron McLeod
  • Liutauras Vilda
  • Jeanne Boyarsky
  • Junilu Lacar
  • Rob Spoor
  • Paul Clapham
Saloon Keepers:
  • Tim Holloway
  • Tim Moores
  • Jesse Silverman
  • Stephan van Hulst
  • Carey Brown
  • Al Hobbs
  • Piet Souris
  • Frits Walraven

Transparent Image Overlays using CSS

Ranch Hand
Posts: 3271
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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?

Ranch Hand
Posts: 413
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
    Bookmark Topic Watch Topic
  • New Topic