HighDots Forums  

PNG fading border...newbie question...help!!!

Macromedia Dreamweaver Macromedia Dreamweaver Discussions (macromedia.dreamweaver)


Discuss PNG fading border...newbie question...help!!! in the Macromedia Dreamweaver forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Centerpoint Computer
 
Posts: n/a

Default PNG fading border...newbie question...help!!! - 11-09-2005 , 02:51 AM






First, look at www.startingovertv.com.

Now, the entire site inside the main border appears to be a flash document,
which is beside the point. What I'm trying to replicate is the soft edge which
is nested inside two table cells with 100 pixel height images that have a
gradient fade from black to transparent saved in PNG format. I had to do some
digging to locate this image.

The transparent part of the PNG image allows the background which is a JPG to
show through. It also is only 100 pixels high and the image is set to 100%
height.

I created a 3 column table in dreamweaver and a new PNG-8 image in photoshop
and I put the image in the first and third cell, set the width and height to
match, and ran into two problems.

1. The image does not stretch to meet the height of the cell unless I create
a style for the cell that repeats the image on the y-axis.
2. The image does not appear transparent and actually appears green (I think
this is an optical illusion because the background on my page is a GIF with
tiny blue lines in it) ONLY when I view it in any browser. If I'm looking at
it in Dreamweaver, it looks fine.

How do I make a 100px high image stretch to the height of a given cell if I
don't use CSS and how do I make sure that the image is going to actually be
transparent within the browser?


Reply With Quote
  #2  
Old   
Lionstone
 
Posts: n/a

Default Re: PNG fading border...newbie question...help!!! - 11-09-2005 , 09:28 AM






Quote:
How do I make a 100px high image stretch to the height of a given cell if
I
don't use CSS and how do I make sure that the image is going to actually
be
transparent within the browser?

A background image won't stretch; it will only tile (repeat itself). Unless
you have background-repeat:none somewhere in your style rules, a background
image should tile without any further instruction on your part. A simple
repeat-y, as you found, will cause it to tile vertically no matter what.

A regular image (using the img tag) will not stretch beyond the dimensions
specified in the image tag, even though they may be larger than the actual
image. So the graphic will be stretched (with rather poor results, I might
add), but it will still be a static size as specified by the img tag.

The only way to make sure an image will be transparent in the browser is to
view it in the browser. PNG-8 is supported by all the major browsers, but
only single-color transparency is completely supported. Single-color
transparency is the kind of transparency that GIF images use - any given
pixel is either transparent or opaque. If you use alpha-channel
transparency, which allows translucency (50% opaque, stuff like that), then
it will not be supported in IE without some further instructions to the
browser.




Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.