Solving the alpha images and background-color problem

Summary: We most definitely need a way to make sure transparent images  
look right when they are loaded, which means we make sure the  
background-color is altered or set to transparent on image load, but some  
of us also want to make sure the content is accessible if the image is not  
loaded / before it can be loaded.

Solution:
A new background-color value that tells us which color value to switch to  
when image is loaded:

onimageload(color-value)

Examples:
a)
{
background-image: url(foo.png);
background-color: red onimageload(transparent);
}

Sets the bg color to transparent when foo.png loads.

b)
.a, .b
{background-image: url(grayishalpha.png);}
.a
{background-color: #F00 onimageload(#F66);}
.b
{background-color: #0F0 onimageload(#6F6);}

Both classes use same image, but .a bg-color is turned to lighter red, .b  
to lighter green on image load, because our image
gives the necessary contrast but some underlying and matching color would  
still add to our design, and we save bandwith by not using seperate  
reddish and greenish alpha images. There may be other reasons why an  
author would want to ensure necessary contrast before image loads, but not  
necessarily have the background-color set to full transparent.


c)
{background: red onimageload(transparent) url(foo.png) no-repeat 50% 50%}

Shorthand example.
---

For people who have the time;
Advantages of this method over any other:
*No new property name
*No new syntax rules
*Suitable for short-hand
*Truly in the Cascading Style Sheets logic, no backwards compatibility  
problems for older UA's, which would be fed the background-color using the  
old syntax declaring colors with this new method.
*The CSS author is not limited to only transparent color on image load,  
which would be useful on a variety of situtaions.
*This way, transparent images will finally be used without the fear of  
creating accessibility problems (
Whenever you define color, define bg-color motto can finally be practised  
with transparent images.)


For people who have more time;
I hope you give full support to this semi-formal proposal. I had given  
this a shot earlier, while the idea was backed by some, the syntax was  
not. (background-standin-color), and than the topic was divided to  
@supported and some other things.

I am often using transparent images for backgrounds, and while I am not  
happy I can't do it the accessible way, I am forced to use them the way it  
is, as transparent images give me *enourmous* flexibility and scalability.  
It is not simply a time saver, it is a life saver, design-wise. And I  
can't take seriously any idea about why we don't need alpha-images for  
background. With the IE7 -finally- providing proper PNG support, we'll be  
seeing *even more* uses of this. And if W3 doesn't provide an accessible  
background/foreground handling solution during the presence of alpha  
images, it will do a very big harm to the internet, as I am sure designers  
would be forced used to use transparent backgrounds all over. At least W3  
should give people who care for accessibility a big helping hand. The fact  
transparency in images, multi-bit or not, existed for so long without any  
proper solution for accessibility is sth that should make all of us  
concerned.

-- 
Emrah BASKAYA
www.hesido.com

Received on Saturday, 13 August 2005 00:19:01 UTC