okay, i want to create a fading gradient background image...it's easy enough to make - i create a 10x500 blank image in photoshop, and apply the gradient after choosing my two colors, right? okay...i save it in PNG format (the only option that's showing up in photoshop)...this is my CSS code:

body {
background-color: rgb(60,70,60);
background-image: url(bg.png);
background-position: 0px 0px 0px 0px;
background-repeat: repeat-x;
}

you can see the result here: http://www.augusthousetexas.com/background/bg-png.htm

on my laptop, in firefox, the PNG shows up beautifully...when the background image reaches the end, the background-color takes over and it's seamless...BUT:

1.) in IE, the background stops randomly and there's a dividing line between the end of the background image and the background-color...i don't know why

2.) if i open the PNG in paint shop pro, i can save it as a JPG...when i do this and change the css to call the JPG as the background image, it shows up fine, but the gradient has more definitive transitions, which makes it look like crap...you can see this at http://www.augusthousetexas.com/background/bg-jpg.htm

what am i doing wrong? i've seen gradient backgrounds on sites before and they don't look like crap, so i know it's possible...if i could remember a site off the top of my head, i'd go there and check out their code, but i don't...ideas? suggestions? comments?

1/1/2007 6:13:40 PM

IE doesnt support alpha transparency in png's, thats the only thing I could think that would cause it. Make sure it fades opaquely from one color to the next.

1/2/2007 2:25:20 AM

To be honest with you, I see the transitions very clearly in firefox as well, with both examples, so you might as well just use the jpg

1/2/2007 8:58:33 AM

wtf...on THIS computer (running integrated intel graphics, the SAME as my laptop, AND the latest version of firefox - same as my laptop) i can see the lines...what's up with this?

1/2/2007 6:34:58 PM

stop trying to be trendy


nobody uses pngs

1/2/2007 7:25:29 PM

Is it set for 16-bit color by any chance? Dithering will reduce the visibility of the banding, and a 24-bit image will be dithered to render in a 16-bit color space.

Incidentally, if you dither your source image it will pretty much eliminate the banding. Make sure to use an error diffusion dithering algorithm for best results. I imagine it'll also increase the image size significantly, so you may want to look into conditionally using IE's DXImageTransform extensions which can render a two-color gradient without a source image. I'm not sure if it dithers, though.

1/2/2007 8:12:02 PM

dither

dither

dither

1/2/2007 8:20:15 PM

PNG's are the hotness, just stay away from using alpha channel transparency.

1/2/2007 8:28:16 PM

GIF4LYFE

1/2/2007 8:36:43 PM

it is a javascript fix for this

just search google

1/2/2007 8:38:13 PM

oh I know pngs rock


but nobody uses them.

1/2/2007 9:26:48 PM

alpha channel transparencies are the hotness, just stay away from microsoft internet explorer

1/2/2007 10:36:13 PM

geez, just start out with a new jpg image, make it a gradient and save it at 98%+ quality, it's the compression that's giving you banding and to reduce the file size make it 1x600 instead.

pngs are nice, but for this execution jpg will due just fine and you don't have to worry about compliancy... especially since both images are <1.5KB @ 1x750

and dither looks like shit

and you don't need no javascript fix for this either

[Edited on January 2, 2007 at 11:37 PM. Reason : .]

1/2/2007 11:29:18 PM

IE..

1/2/2007 11:57:40 PM

Quote :

"it's the compression that's giving you banding"

i don't think that's true...because it shows up just fine on some screens and it looks like crap on others...also, it looks fine in either ps or psp

thanks for all of the suggestions...i'll tweak it tomorrow and give it a shot...i appreciate the input!

1/3/2007 12:11:38 AM

JPG - 735bytes
http://www.syprus.com/bg/bgjpg.html

minor striping but with this color that may be closest you will get w/ JPG

another good design tip i'll throw you is that most of the sites that have gradients also use patterns to help disguise the gradient striping... something to consider

[Edited on January 3, 2007 at 12:16 AM. Reason : .]

1/3/2007 12:15:24 AM

^^ I know some LCD displays only actually render like 6 bits per color channel, which would limit you to 2^6=64 shades of grey and for a 500 pixel image results in banding 7 or 8 pixels tall. Even the 2^8 discrete levels of grey provided by 24-bit color are constraining, since you're only utilizing a subset of the already limited luma depth with a grey-to-grey gradient. Dither that shit if you want it to look nice.

^What do you think a "pattern to disguise the gradient striping" is? Ordered dithering, which after some reading may actually be better than error diffusion in this case. You can get like 1700-something discrete levels of "pseudogrey" due to the differing luma constants for the red, green, and blue color channels-- subpixel dithering essentially.

Real grey:


Pseudogrey:


[Edited on January 3, 2007 at 2:07 AM. Reason : Note that it's a spiral pattern in both cases, there are significantly more shades of grey there.]

1/3/2007 1:47:34 AM

i was specifically referring to gif dithering, when compared to it's jpg/png counterparts

[Edited on January 3, 2007 at 9:18 AM. Reason : .]

1/3/2007 9:17:33 AM