maggie: Bild über die ganze Seite

Beitrag lesen

Hallo,
ein Bild (1200 x 1000px) soll die ganze Browserbreite ausfüllen - durch Positionierung soll bei kleinerem Screen also ein anderer Ausschnitt erscheinen. (overflow:hidden)

Der generierte Quellcode sieht so aus (stammt aus einem Joomla-Modul):

<div id="hg">  
	<table class="moduletable_bild" cellpadding="0" cellspacing="0">  
			<tbody><tr>  
			<td>  
				<!-- Flexheader3 start --><img class="bg" style="border: 0pt none ;"  src="/wegzumbild.jpg"><!-- Flexheader3 end -->			</td>  
		</tr>  
		</tbody></table>  
</div>

Über CSS versuche ich nun das Bild zu positionieren. Wenn ich das Browserfenster verkleinere bzw. vergrößere funktioniert der gewünschte Effekt mit dem wechselnden Ausschnitt. Aber das gesamte Fenster ist nicht ausgefüllt. Das ist auch logisch, durch die unvollständigen Angaben im CSS. Wenn ich allerdings die Angabe 200% width und height für das Bild angeben (ich denke, dass das noch fehlt) wird das Bild auseinandergezogen und die Seite bekommt Scrollbalken. Meine Style-Angaben sehen so aus:

.bg {  
	min-height:50%;  
	min-width:50%;  
	margin:0 auto;  
	}  
img.bg  {  
	position:absolute;  
	z-index:-1;  
	top:-50%;  
	left:-50%;  
	}  
td.moduletable_bild {  
	width: 100%;  
	height: 100%;  
	overflow:hidden;  
	vertical-align: middle;  
	text-align: center;  
	}

Ich hoffe jemand hat eine Idee was ich falsch mache.
(Meine Vorbild-Site ist diese hier.)
Danke für Hilfe.
Maggie