HTML - CSS - Hintergrundbild zentrieren

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

habe dem Body ein Hintergrundbild per CSS hinzugefügt und zentriert. Nun habe ich das Problem, das wenn ich das Fenster kleiner mache als das Hintergrundbild, dieses links und rechts rauswandert (wegen zentriert). Nach rechts ist ja gewollt, da ja ein Scrollbalken auftaucht für den restlichen Inhalt, aber links sollte es sich nicht rausbewegen.

code:

body {
background-color: #252525;
background-image: url(…/img/body_bg_image.png);
background-repeat: repeat-y;
background-position: center;

padding: 0px;
margin: 0px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1em;
}

geht es irgendwie, das ich das Hintergrundbild zentriere aber spätestens am linken Rand „fixiere“ (ich hoffe man versteht was ich möchte)…?

Gruß

#2

Hallo Bachelor,

mit CSS habe ich mich noch nicht so intensiv beschäftig. Wende dich Bitte an einem der sich mit CSS gut auskennt. Sorry das ich dir da nicht weiterhelfen kann.

mfg d.weinigel

#3

Hi,

das sollte soweit ich weiß nur über einen kleinen Umweg lösbar sein.

Du nimmst einen divcontainer welcher das Hintergrundbild beinhaltet. Gibst ihm eine width von xxx und setzt den margin auf auto.

Somit sollte dien Problem dann eigentlich gelöst sein.

Gruß Björn

#4

Hallo Bachelor,

ja, verstehe was Du meinst. Denke ich. Du willst, dass das Bild zentriert ist, aber
gleichzeitig unter der Bedingung, dass falls das Fenster kleiner wird als das Bild,
das Bild eigentlich linkszentriert ist. Also, links stehen bleibt. Meines Wissens nach
geht nur zentriert oder links, aber kein „centered with conditional position left“
sozusagen. Ich fürchte, Du musst - wofür auch immer Du das brauchst - das
anders machen. Bzw. Überprüfen, ob Du nicht einen anderen Effekt verwenden
kannst oder irgendwie Dein Problem dadurch lösen kannst, indem Du auf diesen
Effekt verzichtest. Mit JavaScript ließe sich vielleicht was machen (Abfrage Viewport
und wenn Viewport kleiner als Bild, dann position: left), aber erstens würde das
zuviel Ressourcen verlangen und zweitens ist das hinfällig sobald JS ausgeschaltet
ist.

Naja, falls Du doch eine Möglichkeit findest, dann schreib mir zurück. Über
Feedback würde ich mich freuen!

Grüße,

  • Lutz
#5

Hallo,

kann dir da leider nicht weiterhelfen. Es gibt keine, mir bekannte, Css-Eigenschaft um dieses gewünschte Verhalten einzustellen. Mit background-position auf left wird das Bild zwar nur rechts abgeschnitten aber es soll ja zentriert werden oder?
Was benutzen Sie den als Hintergrundbild ist es unbedingt notwendig das es nicht abgeschnitten wird?

Gruß

#6

Hallo Bachelor

Ich glaube ich weiss was du meinst. Sobald du das Fenster kleiner machst, werden die Elemente dem entsprechend neu zentriert. Und da die Grösse des Hintergrundbildes nicht angegeben worden ist wird es einfach weggeschnitten.

Wie du die Grösse des Hintergrundbildes ändern kannst, findest du hier: http://hoffmann.bplaced.net/hilfe.php?me=mehrcss&in=…

Viel Glück
Binks

#7

Hallo Bachelor,

du könntest das Hintergrundbild (oben links ausgerichtet!) statt dem Body-Element einem den kompletten Inhalt der Seite umschließenden unmittelbaren Kind-DIV-Element des BODYs zuweisen, dem du die Breite deines Hintergrundbildes sowie „margin:0 auto;“ verpasst.

Das hat allerdings zwei Nachteile:

  • Du müsstest, wenn du einen standardkonformen DOCTYPE verwendest (was ich hoffe), über Javascript sicherstellen, dass dieses DIV immer mindestens so hoch wie der Innenbereich des Fensters ist, damit das Hintergrund bei wenig Inhalt nicht vorher aufhört.

  • Wenn das Fenster kleiner ist als dieses DIV (die Breite des Hintergrundbildes) gibt es hässliche horizontale Scrollbalken, es sei denn du fummelst dir auch hier ein Skript zusammen, welches das verhindert, indem es die Breite des DIVs mit dem Hintergrundbild auf den Wert „auto“ setzt, sobald das Fenster kleiner wird als die Breite des Hintergrundbildes und wieder zurück auf die Breite des Hintergrundbildes, sobald das Fenster größer wird als dein Hintergrundbild.

Gruß Gernot

#8

Hallo Bachelor,

mein erster Gedanke ist gerade, das Bild einfach nach links auszurichten, da ja eh „repeat-y“ eingestellt ist.
Somit wäre gewährleistet, dass es links nicht über den Fensterrand läuft.

Beste Grüße

#9

Hi

Du könntest das Bild in einen div Container packen und diesen so breit machen wie das Bild (style=„width:100px“) und diesen container zentrieren. Der wird dann (soweit ich weiß) nicht links rausgeschoben.
Für den eigentlichen Content machst du dann ein zweites div ohne Hintergrund genau drüber.

Mit zentriertem Hintergrund hab ich bisher noch nicht gearbeitet, also theoretisch gibt es noch eine bessere Variante…

Gruß

Christian