1. h1 {
2. background: transparent url(black50.png);
3. background: rgba(0, 0, 0, 0.5) none;
4. }

Am I right in the assumption that this actually loads black50.png first?

This would abolish the speed benefits you get from using rgba();.

Whats about using :
1. h1 {
2. background: rgba(0, 0, 0, 0.5) none !important;
3. background: transparent url(black50.png);
4. }

I’m not sure how that renders.
But for me it seems logical that browsers like FF, Safari, Co. are ignoring the second background property.

Of course this would remove some flexibility because you are using !important.

Just an idea & not tested (yet).

Regards,
Martin