Bild über die ganze Seite

[maggie]

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

[Gunther]

Hallo!

ein Bild (1200 x 1000px) soll die ganze Browserbreite ausfüllen

Und wenn der Viewport breiter/ höher ist?
Aber davon mal ganz abgesehen, sind reine Hintergrundgrafiken solcher Größe absoluter Schwachsinn. Sorry, wenn ich das so drastisch formuliere, aber etwas anderes fällt mir dazu wirklich nicht ein.

Über CSS versuche ich nun das Bild zu positionieren.

Weise deine Hintergrundgrafik doch direkt bspw. dem Body-Element zu. Positionieren kannst du sie über die CSS-Eigenschaft http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position@title=background-position. Aber wie gesagt - bitte keine solchen Monster von Grafiken - danke!

Ich hoffe jemand hat eine Idee was ich falsch mache.

Ja, dein Grundvorhaben ist schon kontraproduktiv.

(Meine Vorbild-Site ist diese hier.)

Die Seite und ihre technische Umsetzung vergisst du am besten ganz schnell wieder. Sie ist aus Sicht der Usability & Accessability lediglich als Beispiel dafür zu gebrauchen, wie man es auf keinen Fall machen sollte.

Gruß Gunther

[maggie]

Hallo!

Und wenn der Viewport breiter/ höher ist?

Bei den meisten Screens würde vermutl. nur das Bild angezeigt und bei den größeren wäre das Bild dann mittig und mit einer Hintergrundfarbe.
Das Verschiebung des Bildausschnitts bei unterschiedlichen Browserfenstergrößen hat mich wohl zu sehr fasziniert ;-) und dann noch, das muss ich doch auch hinbekommen.
Aber Du hast recht, ich muss umdenken.
Danke.
Gruß
Maggie