Clear a background image (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

rdouglass -> Clear a background image (4/24/2008 12:15:46)

Hi Folks,

I'm using a .PNG image as a background in CSS like so:

background-image:url("/images/css/white-fade.png");

and of course IE6 and below doesn't like PNG. So my Q is "How can I use a conditional to clear that BG image for IE6?" I know how to do a conditional but is there a 'clear' for the background image?



jaybee -> RE: Clear a background image (4/24/2008 12:46:57)

Use the js alpha transparency fix for IE6



rdouglass -> RE: Clear a background image (4/24/2008 13:18:07)

Is that supposed to work for CSS background images? I think I followed the directions (there were only 2) but it doesn't seem to work for me.

This image is just to put a gradient inside a cell and is no big deal to just not display it. So this is what I ended up using to remove it: 

<!--[if lt IE 7]>
<style type="text/css">
.cellGridOne, .cellGridOneAlt, .cellGridOneAlt2 {
	background-image: none;
}
</style>
<![endif]-->


[:o] I didn't even think of "none"....

However, if that JS *does* somehow work with background images, I would be interested to know. I just couldn't seem to work it with the backgrounds. It would be nice, 'cause I do like the gradients in the cell. [:(]

Thanks for that link; I'm sure I'll need to use it elsewhere. [;)]



jurgen -> RE: Clear a background image (4/24/2008 16:48:57)

Why don't you just reformat the image in jpg?



jaybee -> RE: Clear a background image (4/24/2008 18:12:07)

Because it's transparent and jpeg doesn't support transparency.



Why don't you just save it as a gif? [:D]



jaybee -> RE: Clear a background image (4/24/2008 18:15:25)

OK Roger try this which should work with CSS

http://www.alistapart.com/stories/pngopacity/




rdouglass -> RE: Clear a background image (4/25/2008 0:41:40)

quote:

Why don't you just save it as a gif?


2 words; 'alpha transparency'

Gif is so much more grainy and it's a gradient that overlays different colors in a few places. It's quite a nice effect actually.

That "A List Apart" article looks quite promising. I'll let you know how I make out. Thanks.



jurgen -> RE: Clear a background image (4/25/2008 1:18:06)

Is there a chance to actually see the image? And maybe fiddle around a little bit rather than looking for all kinds of "hacks" or "conditionals"?

Just curious ...... there might be an easy way to get out of it. [8D]



rdouglass -> RE: Clear a background image (4/25/2008 1:40:58)

Here it is. It looks empty but it's not. It's the gradient background in the cells of the 2 tables in the center of this page:

http://www.atrainerontheroad.com/locator.asp

The markup is still a little messy there. [8|]

[image]local://upfiles/2412/0A868CBD96984CD7A44A458DB11958BA.png[/image]

EDIT: Actually I say gradient but it's not in IE6 so on that page I have it set to none for IE6. IE6 just shows a solid block with no gradient.



jaybee -> RE: Clear a background image (4/25/2008 2:54:36)

quote:

there might be an easy way to get out of it.


There is, it's called ignoring anyone who hasn't bothered to upgrade to IE7. I'm starting to get to the conclusion that I'll let it degrade for IE6 and earlier rather than turn cartwheels to get it exact. Eventually you have to say enough is enough.

As long as the site isn't breaking badly, is still usable and looks OK then I'm letting them go.



rdouglass -> RE: Clear a background image (4/25/2008 9:16:17)

quote:

I'll let it degrade for IE6 and earlier


That's kinda' what I'm coming to also. I got everything else working fine (in that area anyways) so just making that gradient go away for older IE looks like a very good solution right now.

Thanks all.



mtfm -> RE: Clear a background image (4/28/2008 12:21:03)

This page might be of some assistance, especially toward the bottom.

http://www.mandarindesign.com/opacity.html

Might be more trouble than it is worth, BUT you can do it.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125