The background: cross-fade() Conundrum

Multiple backgrounds are a nice thing to have, but wouldn't it be even better if we could cross-fade said multiple backgrounds for even more spectacular effects? The CSS Image Values and Replaced Content Module Level 4 promises that we can, and it has already been implemented in Webkit!

What are we talking about?

Attention! This only works in Webkit at the moment.

10% cross-fade
50% cross-fade
70% cross-fade

How does it work?

The CSS Image Values Replaced Content Module Level 4 (woah, that's one long spec name!), defines cross-fade() as a new CSS function for images. It accepts 3 parameters: the background-image, the foreground-image, and the amount of crossfade in percentages. In this spec, 0% only shows the background-image and 100% only shows the foreground image. Putting it all together we get: background-image: cross-fade(url(img1.png), url(img2.png), 50%);


It is somewhat useful, as it saves you some bytes in transferring the combination of images. The spec says it should also be possible to cross-fade colors and gradients (what are they if not automatically generated images?). This means you could easily tint your images, plus it saves you the trouble of converting some of the images to semi-transparant PNGs.

Update: Lea Verou mentioned that cross-fade() is mostly useful hidden as the browser uses this to transition between images behind the scenes.

Great, but can I use it today?

Not really, it works to some extent in Webkit browsers (Safari and Chrome), but only if you use two images. It doesn't work with gradients or solid colors, despite what the spec claims. On another note: when we tried this example with SVG images, we got some pretty strange results, so we had to resort to PNGs for now.

Show me the source!

Feel free to look around the differente sourc files we used for this example.