Transparancy Help Options

[liever]

I have a school web page assignment and I'm trying to see if a semi-transparent background behind my text would look better but I cant seem to get it exactly right.

Example

Alright see my problem?
Whenever I try and add in a transparancy code, it turns the whole DIV transparent, which I dont want. I just want the black background of the DIV, which is behind the text, semi transparent. If that makes sence.

The code I've got going on is something like this, for the DIV segment I want transparent:

CODE

#onediv{
[b]{filter: alpha(opacity=55); -moz-opacity: .55; background-color:#000000;[/b]
left:400px;
width:474px;
position:absolute;
top:400px;
}

I've tried many different ways and I'm not able to get the exact thing I want.
it always turns the WHOLE div to transparent. Which I suppose is what a filter does.
but I can never get JUST the background behind the text to go black.

Its rather agrivating and I think I'm about done with it, which is why I'm asking you lovely kids.

Anyone have any idea?

[libertie]

You can't use the transparency filter on a div without turning the entire div transparent - what I would suggest is taking advantage of the alpha transparency abilities of PNG images.

For example, look at this image:


If you look at it on top of a pattern, it looks like this:
http://libertie.cbstaff.com/alpha/transparent.html

To do this, I would modify your code to look like this (I'll explain it after):

CODE

#onediv{
{
background: url(bgimgurl)!important;
background: transparent;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='bgimgurl');
left:400px;
width:474px;
position:absolute;
top:400px;
}

background: url(bgimgurl.png)!important;

This is your background image with alpha transparency. This will make your background image show up in Firefox, Safari, and Internet Explorer 7 without a problem. However, IE6 doesn't support alpha transparencies without using an alpha loader, so you don't want IE6 to use this code. That's why I included the !important bit. That will tell Internet Explorer version 6 to move onto the next line:

background: transparent;

..which tells IE6 not to display the background, but instead make it transparent.

This next bit of code is for Internet Explorer 6 as well. Firefox and Safari will not understand this code, since it's a weird crazy filter only supported by Internet Explorer, but Internet Explorer 7 WILL recognize this, and we only want Internet Explorer 6 to pick it up. Since IE7 has added support for PNG transparencies, it would understand both the original background code AND the alpha loader and display both images on top of each other. Thankfully, IE7 has gotten rid of a lot of the CSS hacks that we used for IE6, so it will not understand the underscore hack, as follows:

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='bgimgurl');

Now, what this is doing is making the image scale to fit, so if it's something you want to repeat or position, you won't be able to. It only stretches the image, so this is great for one pixel stretches, but will not work for tiles. And if you want to position this anywhere except for dead center in the div, this won't work. It'll work great for what you're wanting to do, though.

When I used this method, I found that in IE6 the width was slightly off, so I had to change the width. You might not, but in case you do, the whole code would look like this:

CODE

#onediv{
{
background: url(bgimgurl)!important;
background: transparent;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='bgimgurl');
left:400px;
width:474px;
_width: new width;
position:absolute;
top:400px;
}

Let me know if you have any questions!