Antworten auf deine Fragen:
Neues Thema erstellen

Hintergrund zentriert

terrapack

Noch nicht viel geschrieben

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

Noch nicht viel geschrieben

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

offline

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

Noch nicht viel geschrieben

AW: Hintergrund zentriert

krid2873, das klappt perfekt, danke!
Die Hintergrundgrafik ist nur ein Beispiel, die verwende ich nicht in meinem Projekt.
 
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

Noch nicht viel geschrieben

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.634
Beiträge
1.538.448
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben