Semi-Transparent backgrounds

Anon : to get some, you have to give some. You gotta learn photoshop(buy it first ofcourse) , register at wmw(if you want their suggestions), and do whatever else is neccesary IF you want the job done.
Not everything is wordpress, not everything is free.

Just because I am not a photoshop wizard does not mean I do not have it installed. Or that I do not know how to use it. British understatement is not the same as incompetence. (Generally speaking!) ??

For the life of me, I cannot get this to work. Does anyone have any extra tips for me?
I’m pretty new to HTML and CSS so I’m sure it’s something completely silly, some kind of over-ride or something.
Thanks,
Crystal

Hmm.. I personally used a tanslucent .png file, and just made it into a background graphic. It seemed to me the easiest way to do it (mainly because I am rather hopless at CSS of HTML!). Is my solution too messy?

check out “a list apart”. they have articles on PNG transparency, since IE cant cope with transparent pngs you’ll have to do a png/gif solution.
https://www.alistapart.com/articles/pngopacity/

Throw this into your css, whatever divs you want to be transparent set class=”transparent”, make a another div inside the transparent div, and set it class=”remove_filter”, this will give you a nice semi opaque look. It works well in IE, FireFox, and Safari, any browsers that don’t support it however will just show a solid div, use the proper z-index settings, and everybody will be happy.
.transparent {
background-color: #ffffff;
filter:Alpha(Opacity=55);
-moz-opacity:0.55;
}
.remove_filter {
position : relative;
-moz-opacity:0.80;
filter:Alpha(Opacity=80);
}

thanx for posting the opacity code. I have been toying with how to do it all day. I have an Awsome background and want that to still be a big focus for the site, but would like my blog to still show up and be readable…this is the solution to my issues..
Also on the post above….where is the code for sarfari? the site mentioned above said it needed this code:
-khtml -opacity:.5;
in order to see it.
Or is that what the remove_filter does?
Thanx I am still a newbie, that knows a little.

-khtml-opacity
and
-moz-opacity were only because both didn’t have complete implementations of opacity. Moz now does. Maybe KHTML does too?
.foo {
-khtml-opacity .5;
-moz-opacity: .5;
opacity: .5;
}
stacking ’em works well, though.

try and avoid using opacity css filters as they will apply them to the children of the container your are putting the filter on
if you can use png’s
try this bit of code out
background:url(../images/content_bg_footer.png) no-repeat bottom;
_background-image:none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale,src=’common/images/content_bg_footer.png’);
note you must reference the png from the root onwards for the ie filter as you can see above.
this doesnt work in IE5+ on the mac. But who cares its a shoddy browser anyway

I agree with avoiding opacity css filters because it will apply to the children of the container. Here’s some css code that will work in both IE5-up and Mozilla:

It is an example of using the IE-only AlphaImageLoader and the “* html” hack to provide cross-browser support for png transparency.

#alphaImage /* Will not be seen by browsers that don’t support css. */
{
height: 200px;
width: 200px;
background-image: url( aqua.png );
float: left;
}

* html #alphaImage /* Will only be seen by IE */
{
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(
src=’aqua.png’,sizingMethod=’scale’
);
}

#fallbackImage /* This will be seen by browsers that don’t support css,
it is hidden for browsers than can do css. */
{
display: none;
}
}

This is not my code but taken from the following URL:
https://www.nrkn.com/alpha/