Positionierung eines Bildes

[lascaux]

Hallo,

ich habe folgendes Problem:

Ich habe eine div-Box

#imgPos {width: 100%; height: 100%; position: absolute; z-index: -1;}

indem ein Bild liegt, dass als Hintergrundbild für die Website dient

#bgImg { width: 100%; height: auto; position: absolute; z-index: -1;}

Dadurch dass ich relative Größen verwende, so dass das Bild an den Browser angepasst wird, weiß ich nicht wie hoch das Bild im jeweiligen Browser ist. Mein Problem ist jedoch, dass das Bild breiter als höher ist und somit immer im oberen Teil des Browsers klebt.
Soweit, so gut. Kann man ja beheben:

#imgPos {width: 100%; height: 100%;  z-index: -1; position: absolute; top: 50%; margin-top: -20%;}

Allerdings passt es dann im Google Chrome und im Safari (Browser) nicht mehr. Da hängt das Bild jeweils im unteren Teil des Browsers. Im FF5, IE9 und Opera ist das Bild jedoch pi mal Daumen mittig zu sehen.

Damit gehts zwar:

#imgPos {width: 100%; height: 100%; position: absolute; z-index: -1; padding-top: 6%;}

ist aber nicht wirklich eine elegante Lösung für mich.

Hat jemand eine Idee bzw einen Vorschlag wie man das Bild genau in die vertikale Mitte setzen kann ohne gleich auf Javascript zurückgreifen zu müssen?

lascaux

 

[prm]

Es kommt darauf an, auf welche Basis sich die 100% width und height beziehen.
Wenn es am jeweiligen Bildschirmfenster ausgerichtet sein soll, dann bekommst du mit entsprechenden margin-Werten Probleme.

Generell lassen sich Hintergrungbilder nicht skalieren. Einen Behelfstrick für eine bildschirmfüllende Grafik findest du hier mit den dort ebenso genannten Nachteilen: Bildschirmfüllende Hintergrundgrafik
Allerdings ist mir auch keine Lösung ersichtlich, um die ursprünglichen Bildproportionen beizubehalten und noch eine vertikale Zentrierung zu erreichen.

Vertikalzentrierungen erreichst du so: Horizontale und vertikale Zentrierung mit CSS - was eine fixe oder prozentuale Höhe des zu zentrierenden Objekts voraussetzt.

Beides wird wohl schwer in Einklang zu bringen sein.
Deshalb würde ich dir in diesem Fall zu einem fixen Layout raten. Hat den Vorteil, dass es in unterschiedlichen Fenstergrößen auch immer gleich aussieht (kalkulierbar), von evtl. Scrollbalken mal abgesehen.

 

[lascaux]

Hallo,

und danke für die Antwort. So wie es scheint, komme ich wohl nicht um Javascript herum. Zentrierungen und ähnliches sind mir bekannt, aber danke :)