Heppi: Browser stellt Hintergrundbild größer dar als es ist

Servus zusammen,

ich habe eine Seite erstellt und mittels css eine Hintergrundgrapik eingebunden. Der Code dazu ist der folgende: body{ background: url('../pix/bg.jpg') no-repeat center center; }

Allerdings stellen sowohl der IE als auch Firefox die Graphik größer dar als sie wirklich ist. Ich habe im Anhang mal ein Bild, welches dies verdeutlich. Einmal die Ausgabe des Firefox (rechts) und links das, was IrfanView anzeigt. Jemand eine Idee, wie es zu dem Unterschied kommt? Danke euch schon mal.

Schöne Grüße, Heppi.

Größenvergleich

  1. Hallo Heppi,

    ich verstehe dein Problem noch nicht ganz, zumal diese Sceenshots wenig aussagekräftig sind. Also vermute ich mal... was auch immer exakt dein Problem sein sollte, dürfte dir http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/background-size ein wenig helfen.

    Insbesondere: background-size: cover;

    Gruss
    Henry

  2. Hi,

    Allerdings stellen sowohl der IE als auch Firefox die Graphik größer dar als sie wirklich ist. Ich habe im Anhang mal ein Bild, welches dies verdeutlich. Einmal die Ausgabe des Firefox (rechts) und links das, was IrfanView anzeigt. Jemand eine Idee, wie es zu dem Unterschied kommt?

    ist IrfanView so konfiguriert, daß dort das Bild wirklich nicht skaliert ist?

    cu,
    Andreas a/k/a MudGuard

    1. Das Bild ist bei IrfanView auf 100% eingestellt und ich arbeite am gleichen Rechner.

      Ok, ich versuch's nochmal 😂 Ich habe eine Hintergrundbild, welches 2000 x 1500 px hat - es ist also größer als der Anzeigebereich.Davon soll einfach die "Mitte" angezeigt werden. Was über die Ränder hinausragt soll einfach abgeschnitten werden bzw. nicht sichtbar sein. Dies soll dazu dienen, daß ich ein Hintergrundbild habe, welches immer den kompletten Hintergrund ausfüllt, aber auch immer gleich groß ist - also nicht gestreckt oder gestaucht wird. Allerdings wird es von den Browsern (Edge 41 und Firefox 58) größer dargestellt als es IrfanView zum Beispiel bei 100% Zoom tut. In der Graphik ist links die Darstellung mit IrfanView zu sehen und rechts die mit Firefox (gleicher Bildausschnitt halt einmal ohne Text). Warum machen die Browser das Bild größer? Danke euch schon mal.

      Schöne Grüße, Heppi.

      1. @@Heppi

        Ich habe eine Hintergrundbild, welches 2000 x 1500 px hat - es ist also größer als der Anzeigebereich.

        Nein.

        Das Hintergrundbild ist mittig, links und rechts davon ist weiß.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Hallo Gunnar,

          du kannst nicht alles haben, du hast ja schon ein Retina−Display 😀

          Gruß
          Jürgen

          1. @@JürgenB

            du kannst nicht alles haben, du hast ja schon ein Retina−Display 😀

            Leider nicht.

            Lumpige 2560 × 1440 Pixel bei 27ʺ Diagonale kann man nicht hochauflösend nennen.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Hallo,

              du kannst nicht alles haben, du hast ja schon ein Retina−Display 😀

              Leider nicht.

              Und ne Maus hat Gunner bekanntermaßen auch nicht. Vielleicht sollten wir mal sammeln für ihn…

              Gruß
              Kalk

            2. Hallo Gunnar,

              Lumpige 2560 × 1440 Pixel bei 27ʺ Diagonale kann man nicht hochauflösend nennen.

              also Klötzchengrafik …

              Gruß
              Jürgen

              1. @@JürgenB

                Lumpige 2560 × 1440 Pixel bei 27ʺ Diagonale kann man nicht hochauflösend nennen.

                also Klötzchengrafik …

                Grad mal mit dem Finger übern Monitor gefahren – fühlt sich glatt an.

                Also wenn das Klötzchen sind, dann sind die in z-Richtung verdammt gut ausgerichtet.

                Na toll, und jetzt darf ich denn Fettstreifen auf dem Monitor wieder wegwischen …

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    2. Grad nochmal geschaut. In den Browsern ist auch kein Zoom oder so eingestellt. Das Bild wird ziemlich genau um 25% vergrößert.

      1. @@Heppi

        Grad nochmal geschaut. In den Browsern ist auch kein Zoom oder so eingestellt.

        Das wäre meine erste Frage gewesen.

        Nun die nächste: Wo kann man sich das ansehen?

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Probier's mal hier 😉 http://www.selleries-vollmond.de/zzz

          1. Hallo,

            bei mir (FF58, WIN10) hat das Hintergrundbild die richtige Größe.

            Gruß
            Jürgen

          2. @@Heppi

            Probier's mal hier 😉 http://www.selleries-vollmond.de/zzz

            Seite im Firefox geöffnet, Bild in Photoshop geöffnet – gleich groß.

            Apropos groß: 265 kByte‽‽ Über ein Viertel Megabyte – für ein Hintergrundbild‽‽ Das ist viel zu groß! Mit max. 50 kByte solltest du hinkommen.

            Erstelle getrennte Hintergrundbilder für grün und gelb. Verwende beim Speichern als JPEG eine hohe Kompressionsrate. Das Bild für grün muss auch nicht 2000 × 1500 Pixel groß sein – und lass es im Browser skalieren, so dass die gesamte Fläche gefüllt wird (was du wohl willst, aber nicht erreicht hast). Die Inhalts-Container bekommen den gelben Hintergrund. Das Wasserzeichen (transparent) kannst du auf das Gelb draufpacken oder du erstellst ein drittes Hintergrundbild mit Wasserzeichen auf Gelb.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Wie bekomme ich denn den Übergang von gelb nach grün hin? Also gelb und letztendlich ein transparenter Hintergrund ist klar, aber wie geht das mit dem Übergang? Für einen transparenten Hintergrund dürfte ich ja nur zwei Farben verwenden, oder!? Aktuell ist der Übergang ja fließend.

              1. @@Heppi

                Wie bekomme ich denn den Übergang von gelb nach grün hin?

                Mit box-shadow.

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. Wieder was gelernt 😀 Vielen Dank!

      2. Hi,

        Grad nochmal geschaut. In den Browsern ist auch kein Zoom oder so eingestellt. Das Bild wird ziemlich genau um 25% vergrößert.

        Bei mir auch.

        Nur mal so als Idee (weil bei mir ist das so): hast Du in Windows eine Vergrößerung eingestellt?
        Also Rechtsklick auf Desktop, Bildschirmauflösung, dann unten den Link "Text und weitere Elemente vergrößern oder verkleinern", da ist bei mir "Mittel - 125%" eingestellt.

        Ach ja, der Anzeigebereich wird mit dem Bildchen bei mir auch nicht gefüllt - ich hab zwei 4K-Monitore …

        cu,
        Andreas a/k/a MudGuard

        1. Das ist es... Da stehen bei mir auch 125%. Da muß man aber auch erstmal draufkommen. Danke Dir 😀

          Wie trenne ich denn den gelben und grünen Teil? Der Übergang zwischen den Farben ist ja fließend. Somit werde ich das ja nie so hinbekommen, daß der Hintergrund transparent ist. Der Übergang wird dann ja zu sehen sein, oder!?