Hallo,

ist es möglich, eine Hintergrundgrafik in den Minusbereich zu schieben, wenn sich die Auflösung verkleinert?

Habe einen Container, der sich in je nach Auflösung immer in der mitte befindet. Optimiert ist dieser Container für eine Auflösung von 1024 x 768. Hinter diesem soll nun eine Grafik liegen, die 1280 Pixel breit ist (genau positioniert rechts und links über den Containerbereich ragend) und immer mit verschoben werden soll, aber immer so, dass ein Bereich immer an einer bestimmten Stelle unter dem Container bleibt. Hoffe, dass ich mich einigermaßen verständlich ausgedrückt habe.

Anbei mein Code:

html, body {
margin: 0;
padding: 0;
height: 100%;
}

body {
overflow-x: auto;
background-image: url('images/body_bg.png');
background-repeat: repeat-x;
top: 0;
background-color: #60aeaf;
text-align: center;
font: normal 12px Arial;
}

#page {
height: 100%;
margin-left: 150px;
width: 917px;
color: #009c95;
}

#header {
background-image: url('images/highlight_bg.png');
background-repeat: no-repeat;
float: left;
width: 917px;
height: 100%;
margin-top: -430px;
}

#back {
left: -50%;
text-align: center;
height: 222px;
background: url('images/back.png');
background-repeat: no-repeat;
float: left;
width: 1280px;
margin-top: 330px;
}


<div id="back" style="z-index:1"></div>
<div id="page" style="z-index:2">
<div id="header">
</div>
</div>

z-index wirkt nur, wenn Du Container explizit mit :relative oder :absolute positionierst.

Ich halte deinen Ansatz für das Zentrieren für überdenkenswert.
Schau Dich mal hier um:

Vertikales und/oder horizontales Zentrieren

Dann hast Du dein Problem vermutlich nicht mehr, da Du das Hintergrundbild dem zentrierten Container mitgeben könntest und in diesen einen oder mehrere Inhaltscontainer packst.
Apropos Zentrieren des Hintergrundbildes: Ich würde es mit Prozentwerten versuchen:

Die Prozentwerte sind nur beispielhaft. Evtl. ist eine Anpassung der Grafik erforderlich. Überstehende Ränder müssten bei kleineren Containern abgeschnitten werden ( nur ein Vorschlag, nicht getestet)

__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Hi,

sorry, hat etwas länger gedauert mit einer Antwort. Habe mich mit Deinen Hinweisen beschäftigt. Für eine Auflösung, die größer wird auch alles kein Problem, aber wenn die Auflösung kleiner 1280 Pixel wird verschiebt sich zwar der Container nach links, aber das Bild eben nicht mehr. Somit sitzt der Container nicht mehr so auf der Hintergrundgrafik, wie er soll. Und das Layout muss leider zwingedn so umgesetzt werden.

Vielleicht fällt mir ja noch etwas ein. Danke erstmal.

Lege doch mal #page in #back.
Dein Code legt nahe, dass die beiden bisher unabhängig voneinander sind und das erleichtert das "gemeinsame" Verschieben nicht unbedingt .
Ein Testcase online wäre auch hilfreich.

__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte