I've made a semi transparent gif in ImageReady that I wanted to place over my pages as an overall animated grainy effect, so that you can see both the gif AND the page beneath. I made the gif about 55% opaque in ImageReady and it worked in there but when i apply it over pages, I can no longer see through the gif.
Any suggestions or idea would be really greatly appreciated.gifs do not have an alpha channel the pixels are either fully opaque or fully transparent. If pngs were fully supported then they would make you very happy.
Sometimes actually getting the GIF transparency out of a paint program is tricky. Either upload the GIF here or give us a link so we can see the problem. I've done this before with no problem.See it here (<!-- m --><a class="postlink" href="http://casdious.envy.nu/smallergif.html">http://casdious.envy.nu/smallergif.html</a><!-- m -->)
It's been made smaller so that it doesn't take too long to load, but you should get the idea. The gif is supposedly see-through, but if placed on top of anything, it replaces it/covers it up.Use the fully opaque gif, and set the semi-transparency with CSS. However you'll need different syntaxes, 1 for IE and another for gecko based browsers and Safari for Mac. Opera doesn't support the opacity property yet (last i checked, anyway).As I suspected that GIF is not transparent. Here's one that is although it's only useful as a demo. Put a #content div on a page and style it so:
body { background: url(pagebkg.gif); }
#content {
margin:5em;
padding:5em;
border:1px solid black;
background: transparent url(testtran.gif);
}
You'll see the page background through the testtran GIF.Now another quick and interesting question,
you can also make..lets say a small box with a transparent color set as background-color would that work?Originally posted by imnoguru
Now another quick and interesting question,
you can also make..lets say a small box with a transparent color set as background-color would that work? You mean like this: <!-- m --><a class="postlink" href="http://webdesign.maratz.com/lab/superstripes/">http://webdesign.maratz.com/lab/superstripes/</a><!-- m -->
Any suggestions or idea would be really greatly appreciated.gifs do not have an alpha channel the pixels are either fully opaque or fully transparent. If pngs were fully supported then they would make you very happy.
Sometimes actually getting the GIF transparency out of a paint program is tricky. Either upload the GIF here or give us a link so we can see the problem. I've done this before with no problem.See it here (<!-- m --><a class="postlink" href="http://casdious.envy.nu/smallergif.html">http://casdious.envy.nu/smallergif.html</a><!-- m -->) It's been made smaller so that it doesn't take too long to load, but you should get the idea. The gif is supposedly see-through, but if placed on top of anything, it replaces it/covers it up.Use the fully opaque gif, and set the semi-transparency with CSS. However you'll need different syntaxes, 1 for IE and another for gecko based browsers and Safari for Mac. Opera doesn't support the opacity property yet (last i checked, anyway).As I suspected that GIF is not transparent. Here's one that is although it's only useful as a demo. Put a #content div on a page and style it so:
body { background: url(pagebkg.gif); }
#content {
margin:5em;
padding:5em;
border:1px solid black;
background: transparent url(testtran.gif);
}
You'll see the page background through the testtran GIF.Now another quick and interesting question,
you can also make..lets say a small box with a transparent color set as background-color would that work?Originally posted by imnoguru
Now another quick and interesting question,
you can also make..lets say a small box with a transparent color set as background-color would that work? You mean like this: <!-- m --><a class="postlink" href="http://webdesign.maratz.com/lab/superstripes/">http://webdesign.maratz.com/lab/superstripes/</a><!-- m -->