www.webdeveloper.com
Results 1 to 8 of 8

Thread: See-through, not transparent, gif

  1. #1
    Join Date
    Feb 2005
    Location
    London
    Posts
    4

    See-through, not transparent, gif

    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.

  2. #2
    Join Date
    Dec 2004
    Location
    Neca Valley, Pennsyltucky
    Posts
    388
    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.

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    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.

  4. #4
    Join Date
    Feb 2005
    Location
    London
    Posts
    4
    See it here


    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.
    Last edited by casdious; 02-19-2005 at 05:57 PM.

  5. #5
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    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).

  6. #6
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    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:
    Code:
    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.
    Attached Images Attached Images

  7. #7
    Join Date
    Feb 2005
    Posts
    42
    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?

  8. #8
    Join Date
    Dec 2004
    Location
    Neca Valley, Pennsyltucky
    Posts
    388
    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: http://webdesign.maratz.com/lab/superstripes/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles