div container mit background-image auf unbekannte höhe repeaten.

[suit]

browserübergreifend schwer zu beherrschende div-Wüste
quark.

Wer redet von Wüste?

Wie wärs mit der Holzhammer-Methode und einem Stück Code wie diesem hier

<div class="foo">  
	<p>bar baz</p>  
	<div class="qux"></div>  
	<div class="quux"></div>  
	<div class="quuux"></div>  
	<div class="quuuux"></div>  
</div>

Das ist zwar mehr als nötig aber für jeden einfach verständlich - 1 div je Ecke.

Mit einer Tabelle sieht das meistens etwa so aus:

<table>  
	<tr>  
		<td><img src="qux" /></td>  
		<td></td>  
		<td><img src="quux" /></td>  
	</tr>  
	<tr>  
		<td></td>  
		<td><p>foo bar</p></td>  
		<td></td>  
	</tr>  
	<tr>  
		<td><img src="quuux"/></td>  
		<td></td>  
		<td><img src="quuuux"/></td>  
	</tr>  
</table>  

66% mehr Markup - wofür?

Für runde Ecken mit Hintergrundbildern brauchts grade mal 2 zusätzliche Elemente. Und auch wenn Gunnar jetzt wieder mit mir schimpft halte ich das für besser, als wieder Tabellen zu stöpseln.

Ich zähle bei deiner Lösung vier zusätzliche Elemente, das span-Element in der Überschrift sowie die Überschrift selbst ;) Es ist aber durchaus mit nur (in Summe) zwei elementen Möglich