So, whoever came up with the code injection I ran across this morning - kudos.
your business can have the custom programming required to run your business as efficiently as possible
your business, no matter the size, deserves a website you are proud of, that does exactly what you need
your creative agency shouldn't have to turn away work because you don't have developers on staff, or your developers are busy.
your customers deserve to have access to excellent technical support and customer service even when you're busy.
Over and over again, I find myself needing to put text over an image for some reason or another. (Darned designers and their good ideas!) Recently, I decided to fake it and just cut the image from a designer's PSD and use an image map. I know, I know; I'm bad. It was the quickest way I could think of to get this task done, until the customer wanted different wording and I couldn't track down the PSD.
After searching Google endlessly for things like "transparent background css", "background css transparency" and the like, I decided to just break down and do the thing on my own. Don't get me wrong, I did get a few good ideas along the way, but nothing that made me think, boy, that's a good one. Especially because the majority of the methods I found relied on PNG transparencies and I just don't want to even think about the three holdover IE6 users who would complain to the customer that they don't see the same thing on their work computers as they do on their home computers.
Again, I repeat, JS and PNG and IE htc hackery are not necessary to accomplish this task! (Although, for the fun of it, a little IE CSS hackery is thrown in!)
In a nutshell, here's what I came up with. Elegant? Perhaps not the most elegant, but effective and works in the browsers I've tested (FF3, IE7 & 8, Chrome and Safari 3 & 4; you know, the *important* browsers...).
/*have to set a height & width*/
filter:alpha(opacity=55); /* IE's opacity*/
opacity:0.55; /* CSS2 Compliant browsers understand this */
background:black none repeat scroll 0 0;
height:50px; /* have to set a height to contain the text */
/* set a position for the transparent background over the image */
top:250px; /* picture height minus height of this element */
width:400px; /* width to match the photo */
height: 50px; /* whatever floats your boat */
width: 400px; /* whatever floats your boat */
filter:alpha(opacity=100); /* Make IE understand that this is not transparent */
opacity:1; /* Make CSS compliant browsers understand this is not transparent */
top: 50px; /* whatever puts the text where you need it */
left: 0px; /* again, wherever you need the text */
The Output (yes, I cheated, but for the sake of the embedded editor I'm using on this site):