How do I do this graphic effect?

[EvilChicken]

This site: http://www.tankspot.com/ has the background a little bluring which is cool but the effect I really like is how the white content in the middle can be seen through to catch the color from the background.

How do I get this effect with images and have it work on all browsers?

[legionofangels]

It is not going to work on IE 6, so I know right away it won't work on all browsers. It will work on IE 7, but there style will cause scrolling to be very slow with that browser. It's quite annoying actually on IE 7 since we did the same thing basically and so I've experienced it.

There is an add on here that allows PNG and such to work with IE but I'm fairly sure I read it doesn't work with bg images, so that doesn't help in this case. I could be wrong on this part though, but I've looked at it a few times, debated using it, so I'm near sure I read that right.

That site is using Transparent, or most likely Semi-Transparent images for a lot of sections in there Styles Tables and such. In fact looking at our own styles that we did this on, it seems that nearly everything was changed or a png background image was added for each section except the Fonts of course.

I could just list all the sections to change, but there are several of them and I have to leave for work.

In short under sections relative to tables and such, under Standard CSS Attributes you'll see the first thing says Background, in there you need to putting your PNG semi-transparent image. Here is one of ours for the Panel Forms section:

Standard CSS Attributes

Background url(images/styles/puresky/purebg3.png)

[EvilChicken]

ok, now is there a way to get CSS to just tune the opacity down? Very similar to the Lightbox image layover effect???

Because I would do that to my design but I don't want to make it tougher for other users using the different browsers and have troubles.

[ssslippy]

The simple fact this is not ie 6.0 compatible and I would not recomend doing it.