nicht angemeldet
Hintergrundbildocde
suit
JürgenBHi @ all,
und zwar stehe ich vor einem Problem. Ich möchte ein Hintergrundbild haben, dass über das genze Fenster geht (ohne repeat) und beim Verkleinern des Fensters mitskaliert.
Kennt jemand so einen Code?
-
Hi @ all,
und zwar stehe ich vor einem Problem. Ich möchte ein Hintergrundbild haben, dass über das genze Fenster geht (ohne repeat) und beim Verkleinern des Fensters mitskaliert.
Kennt jemand so einen Code?
Jedoch sollte beim waagerechten Verkleinern das Bild nicht gestaucht werden...
-
Jedoch sollte beim waagerechten Verkleinern das Bild nicht gestaucht werden...
- Bildamessungen bestimmmen
- Abmessungen der Anzeigefläche bestimmen
- größtes Verhältnis von einer Kante des Bildes zur Anzeigefläche Bestimmen
- Breite und Höhe auf Bildkante * Verhältnis setzen
- Außenabstand links und oben auf ((Bildkante * Verhältnis)-Anzeigefläche)/2 setzen
Das sind etwa 10 Zeilen JavaScript - das Packst du in eine Funktion und führst es beim load-, resize- und orientationchange-Event aus.
Mit CSS3 geht das natürlich auch, aber der Browser-Support dafür ist begrenzt - siehe background-size
-
-
Hi there,
und zwar stehe ich vor einem Problem. Ich möchte ein Hintergrundbild haben, dass über das genze Fenster geht (ohne repeat) und beim Verkleinern des Fensters mitskaliert.
Kennt jemand so einen Code?
Was hast Du für ein Glück, daß Du nicht der einzige mit diesem Problem bist...
-
Kennt jemand so einen Code?
Ich hab' da mal etwas vorbereitet - möglicherweise geht sich da noch ein kurzer Artikel dazu aus :)
http://suit.rebell.at/fileadmin/a-33/example/
"Kurz":
Die Sache ist als kleines jQuery-Plugin geschrieben.
Der erste Teil erweitert das jQuery-support-Property um eine Eigenschaft, die true liefert wenn background-size nativ vom Browser unterstützt wird.
Der zweite Teil ist das eigentliche Plugin, welches eine Methode unterhalb des jQuery-Objekts bereitstellt. Mit dem Wert "true" für das init-Argument wird eine kleine Routine angeworfen, die das Hintergrundbild des selektieren Elements ausliest und als img-Element darin einfügt und dann das Hintergrundbild wieder entfernt (Zeile 13 bis 29)
Der essentielle Teil, der das proportionale Skalieren des Bildes übernimmt findet sich in functions.js in Zeile 30 bis 40.
47 bis 51 ist nur zu Demonstrationszwecken um zu zeigen, ob das JavaScript überhaupt zum Einsatz kommt oder ob die native Darstellung belassen wird.
Die Methode muss nur bei ready und resize (optional bei orientationchange) aufgerufen werden. Wann init true oder false zu verwenden ist, sollte klar sein.
Aktuell funktioniertdie Sache außer im IE6 und iOS-Geräten (mangels position: fixed) völlig korrekt - das ist aber kein JavaScript-Problem sondern eine HTML- und CSS-Sache, die gefixt werden kann, wenn man etwas Zeit in einen Workaround reinsteckt. Das interssiert mich grade aber nicht :)
Das JavaScript agiert momentan so wie background-size es mit "cover" tut - also das Bild "umschreibt" das Element, wenn man "contain" (also das Bild wird vom Element eingeschrieben) nutzen möchte, muss man das Verhältnis mit Math.min() bestimmen.
Die Deluxe-Variante könnte das natürlich selbständig aus dem CSS auslesen, aber dazu habe ich auch grade keine Lust :)
-
Hi suit,
zwei Fragen hätte ich zu deinem Beispiel:
Der erste Teil erweitert das jQuery-support-Property um eine Eigenschaft, die true liefert wenn background-size nativ vom Browser unterstützt wird.
Funktioniert das zuverlässig in allen Browsern (und mit allen CSS-Eigenschaften), irgendeinElement.style['eigenschaft'] auf != undefined abzufragen, um daraus sicher schließen zu können, ob der Browser eine bestimmte Eigenschaft unterstützt?
Und du fragst 'BackgroundSize' und 'backgroundSize' ab - welcher Browser hat hier eine eigene Auffassung von CamelCase-sierung?
Ich frage, weil ich einen kleine Effekt habe, der text-shadow voraussetzt, und bei nicht-Unterstützung dieser Eigenschaft eine andere Textfarbe erfordert, weil es sonst unlesbar wird.
Bisher habe ich mir damit beholfen, nach dem Laden von „allem“ (inkl. Stylesheet) gezielt für ein davon betroffenes Element mir den computed style für text-shadow anzuschauen. Deine Methode wäre in der Hinsicht simpler, eleganter und damit „schöner“ ...Muss ich mal ausprobieren, Danke für den impliziten Tipp.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-
-
-
-
Om nah hoo pez nyeetz, JürgenB!
und welchen Vorteil bietet deine Lösung? Meine kommt ohne Javascript aus und verwendet nur "altes" CSS.
zusätzliches Markup aus Gestaltungsgründen versus lange Ladezeit. Die Browserunterstützung dürfte ähnlich sein.
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo Matthias,
zusätzliches Markup aus Gestaltungsgründen versus lange Ladezeit. Die Browserunterstützung dürfte ähnlich sein.
naja, div mit img gegen div mit jeder Menge Javascript. Zusätzliches Markup benötigen beide Lösungen. Und suits Lösung unterstützt den IE nicht, U.A. kommt ein JS-Fehler beim Resize im IE8.
Gruß, Jürgen
-
naja, div mit img gegen div mit jeder Menge Javascript.
"Jede Menge JavaScript" wird nur ausgeführt, wenn der Browser des Benutzers kein background-size versteht.
Zusätzliches Markup benötigen beide Lösungen.
Nein, prinzipiell kommt meine Lösung auch ohne zusätzliches Markup aus - das zusätzliche Markup muss nur mittels JavaScript eingebaut werden, wenn der Browser des Benutzers kein background-size unterstützt.
Und suits Lösung unterstützt den IE nicht, U.A. kommt ein JS-Fehler beim Resize im IE8.
Ja, grade gesehen - muss ich fixen, im IETester funktionierts, in einem IE9 mit Kompatiblität auf 8 nicht, wie's mit einem echten aussieht, kann ich grade nicht testen :)
-
Hallo suit,
naja, div mit img gegen div mit jeder Menge Javascript.
"Jede Menge JavaScript" wird nur ausgeführt, wenn der Browser des Benutzers kein background-size versteht.
es wird aber immer geladen. Wenn das Framework sowieso benötigt wird, kein Problem, aber um nur einige Browser zu bedienen schon der Overkill.
Zusätzliches Markup benötigen beide Lösungen.
Nein, prinzipiell kommt meine Lösung auch ohne zusätzliches Markup aus - das zusätzliche Markup muss nur mittels JavaScript eingebaut werden, wenn der Browser des Benutzers kein background-size unterstützt.
und was ist das?
<div id="background"></div>Und suits Lösung unterstützt den IE nicht, U.A. kommt ein JS-Fehler beim Resize im IE8.
Ja, grade gesehen - muss ich fixen, im IETester funktionierts, in einem IE9 mit Kompatiblität auf 8 nicht, wie's mit einem echten aussieht, kann ich grade nicht testen :)
ich habe den Fehler im echten IE8 gesehen.
Gruß, Jürgen
-
es wird aber immer geladen. Wenn das Framework sowieso benötigt wird, kein Problem, aber um nur einige Browser zu bedienen schon der Overkill.
Das kommt auf die Zielgruppe an :) wenn die "einigen Browser" zehntausende Besucher am Tag ausmachen, ist das vertretbar :)
Und bei modernen Seiten ist oft sowieso ein Framework im Spiel :) und dasselbe ließe sich natürlich auch ohne Framework lösen, es ist nicht viel mehr Code.
Zusätzliches Markup benötigen beide Lösungen.
Nein, prinzipiell kommt meine Lösung auch ohne zusätzliches Markup aus - das zusätzliche Markup muss nur mittels JavaScript eingebaut werden, wenn der Browser des Benutzers kein background-size unterstützt.
und was ist das?
<div id="background"></div>Wie ich schon sagte: Faulheit. Das Hintergrundbild könnte genausogut im body-Element sein und das div-Element mit der ID "background" könnte man erst mittels JavaScript ims DOM hängen - das ist mit jQuery keine Hexerei:
$('body').append('<div id="background" />');ich habe den Fehler im echten IE8 gesehen.
Ja, konnte ich auch grade nachvollziehen - muss ich fixen :)
-
-
-
-
-
und welchen Vorteil bietet deine Lösung? Meine kommt ohne Javascript aus und verwendet nur "altes" CSS.
Das Bild wird aber nicht proportional skaliert und füllt nicht in jedem Fall die komplette Hintergrundfläche aus.
Das geht nur mit neuem CSS (eben background-size) oder mit JavaScript und einem img-Element.
-
Hallo suit,
und welchen Vorteil bietet deine Lösung? Meine kommt ohne Javascript aus und verwendet nur "altes" CSS.
Das Bild wird aber nicht proportional skaliert und füllt nicht in jedem Fall die komplette Hintergrundfläche aus.
wenn ich das richtig beobachtet habe, passt sich bei deiner Lösung die Breite des Bildes an den Viewport an, und das Seitenverhältnis bleibt. Genau das macht meine Lösung auch. Das verstehe ich unter "proportional skalieren". Der Unterschied zwischen unseren Lösungen ist nur, dass bei mir das Bild mit scrollt, was auch so gewünscht war. Daher muss bei mir das Bild bei hohen Seiten unten in die Hintergrundfarbe übergehen oder hoch genug sein.
Das geht nur mit neuem CSS (eben background-size) oder mit JavaScript und einem img-Element.
meine Lösung kommt ohne Javascript und mit altem CSS aus. Alle mir bekannten Browser werden unterstützt, bis auf IE6 und älter.
Wie ich im alten Thread schon geschrieben habe, man muss sich beim aktuellen Stand der Technik oft entscheiden, was das kleinere Übel ist: zusätzliches inhaltsloses Markup oder proprietäre Eigenschaften evtl. mit Javascript oder Browserweichen.
Gruß, Jürgen
-
Das Bild wird aber nicht proportional skaliert und füllt nicht in jedem Fall die komplette Hintergrundfläche aus.
wenn ich das richtig beobachtet habe, passt sich bei deiner Lösung die Breite des Bildes an den Viewport an, und das Seitenverhältnis bleibt.
Es passt sich nicht nur die Breite an, sondern auch die Höhe - und der Überstand wird abgeschnitten (das Bild wird zentriert) - das kann deine Lösung nicht. Auf mit hochformatigem Viewport sieht das dann nicht sehr schön aus. Mobilgeräte wie eben Smartphones oder Tables haben oft einen hochformatigen Viewport.
Genau das macht meine Lösung auch.
Nein, eben nicht - weil das "altes CSS" einfach nicht kann :)
Das verstehe ich unter "proportional skalieren". Der Unterschied zwischen unseren Lösungen ist nur, dass bei mir das Bild mit scrollt, was auch so gewünscht war.
Das scrollen ist nicht das Problem.
Daher muss bei mir das Bild bei hohen Seiten unten in die Hintergrundfarbe übergehen oder hoch genug sein.
Ja und das ist eben nicht vollflächig :)
Das geht nur mit neuem CSS (eben background-size) oder mit JavaScript
Wie ich im alten Thread schon geschrieben habe, man muss sich beim aktuellen Stand der Technik oft entscheiden, was das kleinere Übel ist: zusätzliches inhaltsloses Markup oder proprietäre Eigenschaften evtl. mit Javascript oder Browserweichen.Und das kommt auf die Zielgruppe an - wenn du eine Webseite für "Großen Getränkekonzern X" macht, wollen die da nicht hören, dass das du das nicht machen willst, weil man ein paar Zeilen JavaScript und "neues CSS" braucht :)
Für den "Hobbyfrickler" mag das ausreichen, für den professionellen Einsatz mit "hochwertigen" Layouts, die genau das erfordern, aber nicht.
Und für diesen Einsatz - wenn man
background-size: cover;benötigt - gibt es entweder Flash oder JavaScript als Fallback-Lösung.
-
-
-
-
-