cayaphas: Übergrosses Hintergrundbild (vert.&horiz.)

Beitrag lesen

Hallo,

ich habe seit ein paar tagen ein problem,und kriegs nicht gelöst ...

Ich habe eine page mit einer content-box mit 800x600px mit hintergrundbild.
Diese soll logischerweise bei zu kleinen bildschrim scrollbar sein (is ja der content).

Nun habe ich auch ein hintergundbild mit 1600x1200px. Dieses soll zentriert hinter der conent-box liegen wobei das hintergrundbild der contentbox exakt in das grosse hintergrundbild passt.Also oben und unten 400px sichtbar und rechts & links 300.

Im falle eines gross genugen bildschirms soll alles horizontal zentriert sein. Auch wenn der bildschirm grösser als der conent und kleiner als das grosse hintergrundbild (z.B. 1000px), dann soll das grosse bild rechts und links gleichmässig ausm bildschirm verschwinden (ohne scrollbar) damit der content immernoch passend zum grossen bild ist. Erst bei ner bilschirm grösse von <=800px (conent grösse) soll ein scrollbar erscheinen.

Ich kriegs zwar irgendwie hin mit body-background, background-position:center und so, aber das führt bei verschiedenen browsern zu verschiedenen ergebnissen. IE machts, aber bei opera verschiebt sich das hintergrundbild bei kleinerer bildschirmbreite "hinter" dem content weiter während die conentbox stehen bleibt. Das sieht man an dem rand, den die browser links zwischen content und bildschimrand machen.

Also hab ich jetzt folgende optionen (fragen):

  • krieg ich das irgendwie hin, das das hintergrundbild  auch bei opera stehen bleibt, sobald der content stehen bleibt?

  • wenn nicht, wie krieg ich den rand weg, den die browser zwischen content und bildschirmrand macht? (habs mit margin-left:0 und
    padding -left:0 im body versucht, aber ging irgendwie nicht).
    (diese lösung würd zwar links helfen, aber unten bringts auch nichts, wenn ich z.b ein hohes aber schmales bildschirmfenster hab, da dann unten immernoch die verschiebung erkennbar ist)

  • und dann: gibts ne möglichkeit so eine horizontal-zentrierung und damit einhergehende symetrische verschiebung des hintergrundbildes auch vertikal zu machen?

Ich habs auch schon mit php bzw. javascript versucht, also z.B. bildschirm grösse rauskriegen, und dann negative positionierung bzw. negative-margins von hintergrund und content, aber da bin ich auch nicht weitergekommen (da ich leider nicht soviel ahnung hab davon).

Ich hoffe ich habs verständlich erklärt und ihr könnt mir helfen.