#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    152
    Rep Power
    11

    assistance with transparent background


    heya all,

    i've done a search on the forums and google and altho i've tried many of the tutorials i can't seem to get the effect that i want.

    i am trying to make a 'square' that will tile, it has one color (something close to cccc99, but i've just been clicking any brown for now, trying to get this to work).

    thats the entire image.

    i want this to be transparent - the end goal is to have a transparent background image that will go over a normal image on my site.

    you can see this (without the transparency, and very messed up) on my test site at:

    http://www.lisa-jill.com/categories/test/ - in the right column choose 'transparent'

    with photoshop, i set the opacity to 80% and then saved it - i had the transparency box ticked and it looked like it saved ok, but then when i view it with anything else, its 100% opaque.. i'm not sure where I'm going wrong but I'm terrible with photoshop so i'm not surprised.

    if someone can either tell me how to do this or point me to a tutorial for this specifically, i'd be greatly appreciative

    i was doing this using moz-filter-opaciy and alpha-filter in css but that wasn't cross browser compatable, only ie happy, so i'd rather use a graphic.

    thanks for any help =)
  2. #2
  3. Happy Monkey
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Location
    UK (University of Kentucky)
    Posts
    1,809
    Rep Power
    47
    With gif images, it is either completely transparent, or a solid color. As far a gif's are concerned, there is no such thing as "transparent opacity."

    Now, PNG's will do the affect you are looking for. Just save it as a png, not a gif.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    152
    Rep Power
    11
    there's a png up there currently - it was definitely transparent in ps but now its not.... as you can probably see =)

    what i did was to create the image - a rectangle with the color you see, the image was transparent and 3x2 - i chose 80% opacity

    then i did a save for web - i chose png 24 and clicked 'transparent' - it still looked right in ps - now on my page and viewed using picture viewer - it isnt' transparent

    i'm obviously doing something wrong, i just don't know what
  6. #4
  7. Happy Monkey
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Location
    UK (University of Kentucky)
    Posts
    1,809
    Rep Power
    47
    Not all browsers will support png tranz.

    Take the test here:

    http://entropymine.com/jason/testbed/pngtrans/
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    152
    Rep Power
    11
    and jpegs can't either be semi transparent?

    so i can either continue this non-cross browser compatabilty or give it up til css3 is more widely supported?

    sigh, oh well I'll give that theory up then =)

    thanks everyone!
  10. #6
  11. Happy Monkey
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Location
    UK (University of Kentucky)
    Posts
    1,809
    Rep Power
    47
    Wait! I found a way to make it work in IE:

    http://www.alistapart.com/stories/pngopacity/
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    152
    Rep Power
    11
    still the same problem tho; especially since i use mozilla and woulod like to see it the wa most people do =)

    thanks for the help / researh i do appreciate it!
  14. #8
  15. Happy Monkey
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Location
    UK (University of Kentucky)
    Posts
    1,809
    Rep Power
    47
    Sure thing. I use Mozilla also. I wish everyone used Mozilla.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    152
    Rep Power
    11
    amen *grins*

IMN logo majestic logo threadwatch logo seochat tools logo