Hopefully you see a big image in the background, which means you're using something other than IE to view this. I had to break three of my self imposed rules to get this working though, those being:

1. No proprietary code
2. No additional HTML wrappers, hooks, shims or whatever
3. Must render latest releases of Firefox, Safari, Chrome and Opera

Background sizing should work with the nice neat background-size. Instead it's a case of four different ways for four different browsers. To get the image to stretch to 100% width the CSS looks like this:

article
{
	background-image: url('myimage.png');
	-o-background-size: 100% auto; 
	-webkit-background-size: 100% auto; 
	-khtml-background-size: 100% auto; 
	-moz-background-size: 100% auto;
}

The background image sits on the main article, the fade is an overlayed PNG in a wrapper. This should be possible through multiple background images separated by commas, like this:

article
{
	background-image: url('myimage.png'), url('another-image.png');
}

But Firefox 3.5 doesn't support this and displays no background image. Which is worse than having an extra <div>.

Firefox 3.5 doesn't support background-size at all, so I've had to resort to repeat-x which isn't anywhere near as good an effect. Firefox 3.6 beta does support it though, as well as multiple background images.

That's it for HTML5 / CSS3 for a bit, need to write an admin area next, writing markup by hand is so 90's.

Footnote: css3.info (that I keep linking to) has been really good for CSS3 features and support reference. For HTML5, I wish I'd found diveintohtml5.org earlier, it would have saved me a big rewrite at the start.