Hintergrund zentriert

terrapack · 29.04.2011

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:

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>

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

krid2873 · 30.04.2011

AW: Hintergrund zentriert

Moin,

ich bin mir nicht so sicher ob ich dich genau verstanden habe, daher mein Lösungsansatz unter Vorbehalt.

Füge dieses an die erste Stelle in deinem Styleblock ein:

Code:

html, body
{
min-width: 1240px; /* Der Wert für min-height ist gleich der Breite des Hintergrundbildes.  */
}

Herr_D · 30.04.2011

AW: Hintergrund zentriert

Warum setzt du den BG nicht in den .content-Bereich?

Na ja und 150kb könntest du auch noch sparen, wenn du das Hintergrundbild nur so groß machst, wie blau drin ist... den Rest regelst du über background-color

terrapack · 01.05.2011

AW: Hintergrund zentriert

krid2873, das klappt perfekt, danke!
Die Hintergrundgrafik ist nur ein Beispiel, die verwende ich nicht in meinem Projekt.

Herr_D · 01.05.2011

AW: Hintergrund zentriert

terrapack schrieb:
krid2873, das klappt perfekt, danke!
Die Hintergrundgrafik ist nur ein Beispiel, die verwende ich nicht in meinem Projekt.

Trotzdem solltest du darauf auchten, dass der BG nicht zu groß ist...

aliasltb · 02.05.2011

AW: Hintergrund zentriert

Das Problem hatte ich auch vor kurzem (wenn ich es richtig verstanden habe).

Meine Hintergrundgrafik -musste- größer sein, als die für die Website optimierte Auflösung (falls dann ein Benutzer doch mal ne größere Auflösung hat, dass dann der Rest der Hintergrundgrafik zu sehen ist).

HTML:

background: url "images/background.jpg" no-repeat fixed center center

Damit wird dem Body die Hintergrundgrafik übergeben, sie darf nicht wiederholt werden, sie muss im Browserfenster fixiert werden und der Höhe und Breite jeweils immer zentriert angepasst werden.

terrapack · 02.05.2011

AW: Hintergrund zentriert

Nein, das war anders gemeint. Mein Problem war eher, dass das Hintergrundbild (1px * 1400px, vertikal wiederholt) auf kleinen Monitoren (z.B. Mobiltelefonen) nicht verschoben wird, sondern immer zum Inhalt zentriert bleibt. Das habe ich ja dadurch erreicht, indem ich body und html eine min-width gegeben habe.