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>
|