Hintergrundbild zentr.,gleichmäßge (links/rechts)Skalierung bei Verkleinerung Browser

  • Ich habe ein jpg in der Größe 1920x 1128. Öffne ich dieses Bild im Browserfenster und verkleinere dies an der unteren rechte Ecke, wird das Bild kleiner gezoomt.

    Diese Bild möchte ich als Hintergrundbild zentriert einbinden und bei Verkleinerung der Browserfensters soll links und rechts gleichmäßig der verkleinerte Teil weggenommen werden.

    Hier eine grobe Darstellung des Problemes:


    Bild als Hintergrund 100%:
    AAABBBCCC***Mitte***CCCBBBAAA

    Bild als Hintergrund 80% Browserfenstergröße von max. Bildgröße:
    ABBBCCC***Mitte***CCCBBBA

    Bild als Hintergrund 50% Browserfenstergröße von max. Bildgröße:
    BBCCC***Mitte***CCCBB

    Ach so ! Ist das Browserfenster größer als die max. Bildgröße soll das Bild nicht gekachelt sein.

    Hat jemand eine Idee wie das geht ?

  • Per CSS:

    Code
    body 
    {
      background-image: url(bg.jpg); 
      background-position: center center; 
      background-repeat: no-repeat;
    }
  • Hallo und danke !

    Das Skalieren, die Zentrierung und das Ausblenden des linken/rechten Rand klappt super.

    Mir wird leider aber nur die halbe Grafik angezeigt. Die obere Hälfte wird quasi über den oberen Rand verschoben.
    Füge ich den Befehl 'margin-top:1128px' ein, schließt die Grafik genau mit dem oberen Rand am Fenster ab. Seltsam, ich habe dies auch mit anderen Grafiken ausprobiert. Gleiches Problem.

    Gerade habe ich festgestellt, dass dies nur im Firefox(Vers. 3.6.23) im IE macht er das auch ohne die "margin-top" Anweisung. Komischerweise stört diese auch nicht.