Re: Stand-in color before images load

> Summary for the people in a hurry:
> A styling property called "background-standin-color" that will be used 
> to
> define the background color until a 'potentially' multi- bit alpha 
> image
> is loaded using background-image property. Then the background-color is
> switched back to "transparent".


I like your thought, although I dislike the idea of a new property. I 
suspect this can be done with the existing multi-background spec, with 
a little change to how it works:

1. background colors can be assigned to multiple layers like all other 
background properties

2. a background color does not display in a layer with a defined image 
value *unless* that image also displays -- no image, no color

3. the keyword "none" gets redefined to be specific to the background 
layer, and for the purpose of the above, counts as a loaded image

4. only the topmost color displays -- that is, transparent above a 
specified color does not allow the color to show through

....then I think you have it.


h1 {
	background-image: none, url(foo.png);
	background-color: #fff, transparent;
}

....would display a white background until foo.png successfully 
displays, when the background color becomes transparent.

I think this technique is better than a new property, because it 
reduces some of the exceptions to the stacking rules for backgrounds, 
and connects successful loads to individual layers in the stacks. For 
example, you may need to define multiple fallback background colors, 
depending on *which* images fail to load (tough to come up with a 
use-case).


Problems and rough edges:

- "none" loses some of its magic -- does this interfere with canceling 
previous declarations higher in the cascade via background:none; ? What 
if we used an empty url()?

- how should background-color values be repeated (suggestion: they do 
not repeat *or* they get padded with the topmost value since 
"transparent" would override all below it)

- are multiple background-colors always below all background-images? 
Does this violate the mental model of the stack? Or, should color only 
display where background images do not, to prevent a color from 
occluding an image? How would this jibe with alpha transparency?

-- 

	Ben Curtis : webwright
	bivia : a personal web studio
	http://www.bivia.com

Received on Tuesday, 29 March 2005 23:56:18 UTC