Hallo!
Ich habe eine Seite mit fester Breite. Diese wird im Browserfenster zentriert. Der Body hat ein Hintergrundbild, welches zum Inhalt immer zentriert angezeigt werden soll. Das klappt nur, solange das Browserfenster breiter als der Inhalt ist. Ist es kleiner, erscheint ein horizontaler Scrollbalken und das Hintergrundbild wird zum Fenster zentriert. D.h. die Mitten des Hintergrundbildes und des Inhalts fallen nicht mehr zusammen. Das fällt besonders dann auf, wenn man zum rechten Ende des Inhalts scrollt. Das Hintergrundbild sollte diesen normalerweise überlappen, was ab einer bestimmten Größe des Fensters aber nicht mehr der Fall ist.
Ein einfaches Beispiel:
Hier einfach mal das Browserfenster horizontal verkleinern. Irgendwann wird der Inhalt nicht mehr zentriert, das Hintergrundbild aber, was ich nicht möchte.
Ich hoffe, ich habe mein Problem verständlich dargestellt und ihr habt eine Lösung dafür.
Vielen Dank für eure Hilfe!
Gruß
terrapack
Ich habe eine Seite mit fester Breite. Diese wird im Browserfenster zentriert. Der Body hat ein Hintergrundbild, welches zum Inhalt immer zentriert angezeigt werden soll. Das klappt nur, solange das Browserfenster breiter als der Inhalt ist. Ist es kleiner, erscheint ein horizontaler Scrollbalken und das Hintergrundbild wird zum Fenster zentriert. D.h. die Mitten des Hintergrundbildes und des Inhalts fallen nicht mehr zusammen. Das fällt besonders dann auf, wenn man zum rechten Ende des Inhalts scrollt. Das Hintergrundbild sollte diesen normalerweise überlappen, was ab einer bestimmten Größe des Fensters aber nicht mehr der Fall ist.
Ein einfaches Beispiel:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body{
background: #eee url(http://fc06.deviantart.net/fs37/f/2008/248/0/f/1__Hintergrund_by_Z4nnY.jpg) scroll repeat-y center 0;
}
.content{
margin: 0 auto;
width: 1000px;
position: inline;
background-color: #ccc;
}
</style>
</head>
<body>
<div class='content'>Hier der Inhalt</div>
</body>
</html>
Ich hoffe, ich habe mein Problem verständlich dargestellt und ihr habt eine Lösung dafür.
Vielen Dank für eure Hilfe!
Gruß
terrapack