XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Hintergrundgrafik verschieben bei Änderung der Auflösung (http://xhtmlforum.de/showthread.php?t=56408)

Trixi 25.03.2009 17:20

Hintergrundgrafik verschieben bei Änderung der Auflösung
 
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>

andir 25.03.2009 22:45

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:

Code:

background-position: 50% 50%;
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)

Trixi 30.03.2009 14:15

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.

andir 30.03.2009 16:38

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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:31 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020