Hintergrundgrafik
-
Ich möchte eine Hintergrundgrafik so platzieren, daß sie in jedem Fall vollständig sichtbar ist. Wenn 100 Prozent breit aber höher, soll sie oben und unten abgeschnitten werden. Ist sie 100% in der Höhe aber breiter, soll sie links und rechts abgeschnitten werden. Es sollen also NIE störende Streifen an den Rändern erscheinen.
PS: die Hintergrundgrafik ist eine SVG-Grafik soll aber ein JPG-darstellen wenn der Browser kein SVG unterstützt.
Schon mal vielen Dank.
-
Hallo,
wenn ich das richtig im Gedächtnis habe, kannst du mit background-size: 100% auto; die Höhe der Grafik auf 100% setzen, die Breite wird dann automatisch berechnet und entsprechend skaliert. Bedenke allerdings, dass dies ein Feature von CSS 3.0 ist, also von älteren Browsern nicht unterstützt wird.
Wenn du sowieso eine JPG-Datei hast, dann nutze doch diese für alle Browser, denn JPG wird von allen Browsern unterstützt.
Gruß Christopher
P.S.: Im Allgemeinen reicht es einen Thread zu öffnen
-
TheChrissy schrieb:
Hallo,
wenn ich das richtig im Gedächtnis habe, kannst du mit background-size: 100% auto; die Höhe der Grafik auf 100% setzen, die Breite wird dann automatisch berechnet und entsprechend skaliert. Bedenke allerdings, dass dies ein Feature von CSS 3.0 ist, also von älteren Browsern nicht unterstützt wird.
Wenn du sowieso eine JPG-Datei hast, dann nutze doch diese für alle Browser, denn JPG wird von allen Browsern unterstützt.
Gruß Christopher
P.S.: Im Allgemeinen reicht es einen Thread zu öffnen
Hallo Christopher,
leider funktioniert Dein Vorschlag nicht. Bei Verkleinerung werden oben und unten unschöne Ränder sichtbar. Hast Du noch eine Idee?
JPG kommt nicht infrage, weil die Bilder bei starker Vergrößerung hässlich aussehen. CSS3 muss sein, alle Browser nicht, weil die Seite nur in unserem Firmen-Intranet angesehen wird.
Gruß Renate
-
Hallo Renate,
ich habe mich mal ein wenig schlau gemacht und glaube das passende gefunden zu haben:
background: url('Dein_Bild.svg') no-repeat center center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;Ich denke das ist der von dir gewünschte Effekt. Allerdings ist mir beim Testen aufgefallen das der Firefox und Opera trotz SVG die Bilder pixelig darstellen. Andere Browser nutzen den Vorteil dieses Formats und berechnen saubere Linen etc.
Ich hoffe das es trotzdem ausreicht.
Gruß Christopher
-
Hallo Christopher,
das probiere ich sofort aus, wenn ich aus dem Kurzurlaub zurück bin.
Demnächst müssen meine Intranetsachen nur noch mit dem Chrome-Browser funktionieren, weil es in der Firma keine anderen Browser mehr geben wird.
Vielen Dank für Deine Mühe!
Gruß Renate