creating transparent background

[xiaohai]

Hi,
I'm trying to create a half transparent background effect similar to this website. As what I understand, what he does was setting the "content" class as transparent and tile it with a image. However when I'm trying to create a transparent image like this in photoshop and put it on my website, the background image didn't go through these tiles and become visible. Can anyone tell me if there's a specific way to create these transparent image titles or there's something wrong with my css? Thanks.

[K. Wolfe]

this is what I found in his choco.css file:

.blogposts {
	float: left;
	margin: 0 10px 0 0;
	padding: 0 0 0 10px;
	border-left: 1px solid #996;
	width: 394px;
	text-align: left;
                font: 75%/175% lucida grande, verdana, arial, helvetica, sans-serif;
	background: transparent url(/choco/trans.gif);
	color: #656633;
	}

.blogposts img {
	margin: 0;
	padding: 10px;
                background: transparent url(/choco/ffctrans.gif);
	color: #464215;
	border: 1px solid #B6B484;
                }

[mmj]

Didja notice the translucent link on her site? Says exactly how she did it right there.

[cade]

Wow, that is a pretty inventive way to use a gif to simulate transparency. Can't wait until there is full support for png and standardized css in IE.

[mmj]

Yep. They are using a pattern like this:

O_
_O

However, it may look smoother on most monitors with a pattern like this:

O_

[xiaohai]

oopsy...didn't realize that. Thanks, everyone

[mistafeesh]

more about that kind of stuff here. Doesn't work too well in IE tho

[neodur]

Alpha (opacity) is now supported by both major browsers i.e. MSIE6.0 and Mozilla/Firefox.

For example the following CSS code added to an image will make it translucent by 50% is both browsers:

-moz-opacity:0.5;
filter: Alpha(opacity='50');

[jtresidder]

I was just about to pop into this forum and ask advice about this subject, when I noticed the title of this thread on the front page. Quickest response ever at minus 1 day! Thanks all. (I went with the GIF trick in the end, if anyone's interested)

[jamesxv7]

Originally Posted by mmj

Yep. They are using a pattern like this:

O_
_O

However, it may look smoother on most monitors with a pattern like this:

O_

Great tip! From now, I will going to use it a lot!

[K. Wolfe]

I think I could use this with a couple designs I already have, especially the one I am working on for a local sports update type thing.

[wildsue]

What a pity! I wanted to do a similar thing for my website and didn't find the solution. Now I can use it for the next redesign. Thanks a lot!

[Si]

I've seen the 2x2 px graphic method used before (possibly on an old Microsoft minisite a while back) and thought it was a nice quick fix. I then started using the CSS opacity properties on digidiet and several intranet projects (can't share the links unfortunately). The CSS option is much clearer although obviously has the standards issue on its back.

The only problem I've noticed with the 2x2 px graphics is it causes havoc on my TFT monitor at work! When I first saw the samples on wannabegirl, I thought they were animated. They looked like the snow effect you get on a TV. Saying that, the percentage of non-IE/non-Mozilla browsers which can't render the CSS option is probably less than the percentage of TFT/chunky monitors so its one of those decisions.

[BjarneDM]

Originally Posted by neodur

Alpha (opacity) is now supported by both major browsers i.e. MSIE6.0 and Mozilla/Firefox.

For example the following CSS code added to an image will make it translucent by 50% is both browsers:

-moz-opacity:0.5;
filter: Alpha(opacity='50');

The khtml rendering engine has recently gotten -khtml-opacity (http://weblogs.mozillazine.org/hyatt...s/2003_10.html) so that means that Safari has this since v1.1 and that it'll eventually appear in konqueror.

Eventually, we'll get CSS3

[tentonjim]

Originally Posted by neodur

Alpha (opacity) is now supported by both major browsers i.e. MSIE6.0 and Mozilla/Firefox.

For example the following CSS code added to an image will make it translucent by 50% is both browsers:

-moz-opacity:0.5;
filter: Alpha(opacity='50');

Will either of these validate?
Thanks...

I have done the gif trick too http://freecfm.com/t/tentonhead/index.cfm?lite=home

right click (in a gecko) and "view background image", then save it, then change the color in Photoshop if you want. It's about 20x20 so it is easy to work with.

[neodur]

Originally Posted by tentonjim

Will either of these validate?

Currently, no. But in the future when the next version of CSS comes out, we will simply have 'opacity', and hopefully Microsoft with add that to their engine regardless of whether they keep or discard their proprietary filters.

[wildsue]

I tried out both methods: the one with 2 dots in 2x2px square and the other one with only one dot at the upper side. Both look fine, but the effect is rather different. First is much more intense (like a curtain) than the other who looks lighter. Perhaps usable for two "over-layers", with changing the dot to downside? Has anyone played a bit with that?
The css-methods of opacity are not usable as long as not all browsers do the same thing with it - thats my opinion...

[jtresidder]

Originally Posted by tentonjim

I have done the gif trick too http://freecfm.com/t/tentonhead/index.cfm?lite=home
right click (in a gecko) and "view background image", then save it, then change the color in Photoshop if you want. It's about 20x20 so it is easy to work with.

Quick tip for you all: A background image that has to tile a lot to cover the area it's supposed to will slow down some browsers, especially when scrolling the page. You can see the effect by tiling a small image across the background of a large table contain lots of linebreak tags (Try it, you'll be suprised!).

The optimum size for a background image should weigh this against increased file size. Personally I use around 100x100 images, as they add so little filesize. My checkerboard transparency gif is 100x100 to eliminate the slowdown, and still weighs in at under 1/2k.

[Arctic Fox]

One could always 'fake' a transparency by using 2 images. I've done this on my site for it to be cross-browser viewable in IE5.0

http://arctic.ithium.net/