nicht angemeldet
Henry
MudGuard
Gunnar Bittersmann
JürgenB
Gunnar Bittersmann
MudGuard
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.
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
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
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.
@@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 🖖
Hallo Gunnar,
du kannst nicht alles haben, du hast ja schon ein Retina−Display 😀
Gruß
Jürgen
@@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 🖖
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
Hallo Gunnar,
Lumpige 2560 × 1440 Pixel bei 27ʺ Diagonale kann man nicht hochauflösend nennen.
also Klötzchengrafik …
Gruß
Jürgen
@@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 🖖
Grad nochmal geschaut. In den Browsern ist auch kein Zoom oder so eingestellt. Das Bild wird ziemlich genau um 25% vergrößert.
@@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 🖖
Probier's mal hier 😉 http://www.selleries-vollmond.de/zzz
Hallo,
bei mir (FF58, WIN10) hat das Hintergrundbild die richtige Größe.
Gruß
Jürgen
@@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 🖖
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.
@@Heppi
Wie bekomme ich denn den Übergang von gelb nach grün hin?
LLAP 🖖
Wieder was gelernt 😀 Vielen Dank!
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
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!?
Tabellenkalk