bambi: Hintergrundbild mit Position Center

Hallo zusammen

In habe ein 800 Pixel breites Hintergrundbild in meinem Body-Element, das horizontal zentriert werden soll:

body, html {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  background-color: #FFFFFF;
  background-image: url(hg.gif);
  background-repeat: repeat-y;
  background-position: center;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  text-align: center;
}

Das klappt soweit sehr gut, solange das Browser-Fenster mindestens 800 Pixel breit ist (dann wird das Hintergrundbild wie von mir gewünscht zentriert).

Wenn das Browser-Fenster nun aber schmaler ist als 800 Pixel, würde ich mir wünschen, dass der Browser das Hintergrundbild nicht mehr zentriert (und damit links und rechts einen Teil des Bildes abschneidet), sondern dass er sich verhält, als ob das Hintergrundbild linksbündig ausgerichtet wäre (also nur rechts abschneiden, links aber nicht).

Der IE macht's zwar vom CSS her falsch, aber eben genauso, wie ich es gern hätte. Der Firefox hält sich an die Regeln und richtet das Bild unabhängig von der Fensterbreite zentriert aus.

Kann ich den Firefox (und andere Browser) irgendwie dazu bringen, den gleichen "Fehler" zu machen, wie der IE?

Vielen Dank für einen Tipp und liebe Grüsse
Bambi

  1. Hallo,

    evtl könntest du dein Hintergrundbild teilen, so das sich ein Teil über den anderen schiebt, dann würde sich z.B. etwas in der Mitte verdecken und der linke Teil so bleiben wie er ist. Aber wenn deine Seite nicht speziell für Benutzer mit kleinen Auflösungen (Handy, PDA) ausgelegt ist würde ich mir darum nicht unbedingt Gedanken machen, da nur sehr wenige Internet Nutzer noch eine Auflösung von unter 800x600 benutzen. Allerdings verhält sich bei mir weder IE6 noch IE7 so wie von dir beschrieben (bei meiner Webseite ist Inhalt und Hintergrundbild zentriert).

    Gruß

    Markus

    1. Hallo Markus

      Vielen Dank für Deine Antwort! Leider verstehe ich nicht so richtig, was Du mit dem geteilten Hintergrundbild meinst, das sich dann irgendwie über irgendwas schieben soll... Könntest Du etwas ausführlicher beschreiben, was Du meinst? Das wäre sehr nett!

      Wegen den 800 Pixeln Breite hast Du schon recht. Allerdings ist mein Hintergrundbild so ausgelegt, dass es sich auf die einzelnen Bereiche bezieht (schwer zu erklären...). Ich kann's aber nicht mit einzelnen Hintergrundbildern pro DIV lösen, weil ich das sonst mit der Höhe und mit der darunterliegenden Fusszeile nicht hinkriege. Jedenfalls sieht's einfach wirklich grässlich aus, wenn das Browserfenster schmaler ist als 800 Pixel und das kann ja auch mal passieren, wenn das Browserfenster nicht maximiert ist. Darum wäre es super, wenn ich hierfür eine Lösung finden würde.

      Vielen Dank und liebe Grüsse
      Bambi

      1. Hallo,

        nun es ist schwer was genau zu sagen ohne die Seite gesehen zu haben (Link?) aber etwas in Richtung css slidings doors könnte möglich sein.

        Gruß

        Markus