nicht angemeldet
Hintergrundbild dynamisch einbinden
Gunnar BittersmannMoin SelfHTMLer!
Euer Forum wurde mir von einem kompetenten Herrn sehr empfohlen und nun bin ich da! Bisher habe ich mich nur mit html für eigene kleinere Homepages auseinandergesetzt, möchte mich aber nun mit CSS näher auseinandersetzen.
Ich habe mich schon ein wenig mit den CSS-Grundlagen auseinandergesetzt, finde aber zu folgendem Problem keine adäquate Antwort:
Mein Projekt hat eine index-Hauptdatei, welche ich mich einer CSS-Datei "steuer". Kann ich unter "body" in der CSS-Datei Anweisungen so hinterlegen, dass ein Hintergrundbild dynamisch angezeigt wird. Unter dynamisch verstehe ich, dass das Hintergrundbild sich immer der aktuellen Browsergröße anpaßt und somit voll zu sehen ist.
Ist das möglich? Vielen Dank für Eure Antworten!
Viele Grüße aus dem hohen Norden!
lysjeger
-
Ein Skalieren des Hintergrundbildes, welches man mit der background-Eigenschaft gesetzt hat, ist mit CSS2.1 nicht möglich. Was jedoch möglich ist: man kann ein img-Tag innerhalb eines vollbreiten und -hohen divs mit overflow:hidden; für das Hintergrundbild absolut setzen und dieses auf die größtmögliche Breite so skalieren, dass es auf jeden Fall alles ausfüllt.
Schlimmstenfalls (und damit meine ich den IE) muss man sich mit JavaScript bzw. CSS expressions behelfen. Ansonsten sollte man sich vielleicht überlegen, dass die Skalierung im Browser in vielen Fällen ohnehin unschön wirkt und stattdessen lieber ein Bild als Textur erzeugen, so dass es sich beliebig oft wiederholen kann.
Gruß, LX
--
RFC 1925, Satz 6: Es ist einfacher, ein Problem zu verschieben (...), als es zu lösen.-
Vielen Dank für Deine Antwort LX!
Ich habe mich sofort hingesetzt und versucht Deine Tips umzusetzen. Aber da trennt sich die "Spreu vom Weizen"! Ich muss mir das morgen Nachmittag bzw. Abend noch mal in Ruhe ansehen (Ich fange ja erst an!). Ich brauche da wohl ein "wenig" mehr Zeit für die Umsetzung...
Du hast den IE kritisch angesprochen. Gebe es denn da evtl. Probleme?!
Ich melde mich spätestens morgen Abend wieder. Vielen Dank erst mal!
Gruß
Lysjeger-
Guten Morgen!
Du hast den IE kritisch angesprochen. Gebe es denn da evtl. Probleme?!
Ich habe den IE nur angesprochen. Kritisch wird der von ganz alleine - Dein Problem betreffend insbesondere dadurch, dass er prozentualen Höhen und Breiten nur dann Beachtung schenkt, wenn er sich an einer festen Angabe orientieren kann, von anderen CSS-Standards ganz zu schweigen.
Aber nicht verzagen: es gibt Mittel und Wege, ihn trotzdem dazu zu bringen, ein Bild auf die Hintergrundgröße zu skalieren - das geht mit CSS und ein wenig JavaScript bspw. so:
* html #bgimg { width: expression(document.documentElement.clientWidth+'px'); height: expression(document.documentElement.clientHeight+'px'); } *+html #bgimg { width: expression(document.documentElement.clientWidth+'px'); height: expression(document.documentElement.clientHeight+'px'); }Bei
* htmlund*+htmlhandelt es sich um sogenannte CSS-Hacks, mit denen ausschließlich der IE6 und IE7 (und IE8 im IE7-Modus, aber das ist eine andere Geschichte) etwas anfangen kann (da jeder standardkonforme Browser weiß, dass oberhalb des <html>-Tags bzw. daneben im DOM-Baum kein Element etwas verloren hat). Die expression()-Angaben sind eine standardwidrige Erweiterung von MicroSoft, die es ermöglichen, innerhalb des CSS bestimmte Werte mit JavaScript auszulesen.Im IE6 besteht dabei eine konkrete Sicherheitslücke, da beliebige Scripte ausgeführt werden können - auch solche, die in Wirklichkeit Passwortdaten an ganz andere Seiten senden. Dennoch läßt sich die Technik auch mißbrauchen, um durchaus legale Wünsche umzusetzen.
Gruß, LX
--
RFC 1925, Satz 6: Es ist einfacher, ein Problem zu verschieben (...), als es zu lösen.-
@@LX:
- html #bgimg { width: expression(document.documentElement.clientWidth+'px'); height: expression(document.documentElement.clientHeight+'px'); }
*+html #bgimg { width: expression(document.documentElement.clientWidth+'px'); height: expression(document.documentElement.clientHeight+'px'); }
CSS-Expressions sollten [nicht häufiger als nötig](http://bittersmann.de/articles/css-expressions/) ausgewertet werden. Das hieße in dem Falle evtl. nicht nur einmalige Auswertung, sondern auch auf 'resize'-Events zu reagieren. Aber nicht die CSS-Expressions in Endlosschleifen Ressourcen fressen lassen! Außerdem dürfte es sich anbieten, '[-ms-interpolation-mode](http://msdn.microsoft.com/en-us/library/ms530822(VS.85).aspx): bicubic' zu setzen. Live long and prosper, Gunnar -- Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)-
Danke LX und Danke Gunnar!
Ich fürchte, mein Kenntnisstand - besonders was die Fachbegriffe angeht - ist bei CSS noch nicht ausreichend. Was aber nicht heißt, dass Ihr darauf verzichten sollt. Meine Erfahrung ist, dass mit der Auseinandersetzung mit einem Thema "der Durchblick" nach und nach sehr schnell kommt. Und einmal fangen wir alle ja mal an!
Aber erst mal: Herzlichen Dank für Eure Hilfe!
Mit "div" komme ich klar, es erzeugt einen Rahmen. Nun habe ich mir das in Verbindung mit "overflow:hidden" angesehen, komme aber zu keinem Ergebnis. Zur Zeit teste ich noch mit dem IE7. Laut meiner Referenzkarte CSS-Browserunterstützung (aus dem Buch CSS-Praxis von Kai Laborenz) soll ja nur der IE6 mit dieser Kastenformatierung nicht klar kommen.
Oder sollte ich vielleicht meinen Hintergrundbild-Wunsch im Body-Tag (heißt das so?) der Index-Datei lassen?!? ...und die Anweisung nicht in die CSS-Datei auslagern?!
Ich habe meine bisherigen Versuche auf meinen Server hochgeladen:
http://www.foto-finish.de/Test/
Ich hoffe, das ist so O.K.?! Sollte dieses nicht "Forum-Konform" sein > kurze Info wie es hier gemacht wird! Danke!
Vielen Dank für Eure Hilfe!
Gruß
Lysjeger-
Immer wieder gern!
Bedauere nicht Deinen knappen Kenntnisstand, sondern erfreue Dich Deiner Fähigkeit, ihn zu erweitern. Trotzdem solltest Du ein paar kleine Unterscheidungen vorwegnehmen, die Dir das Lernen erleichtern:
HTML-Elemente wie div erzeugen zunächst einmal nicht etwa einen Rahmen oder eine Box oder sonst irgendetwas Grafisches, sondern einfach nur eine Kapselung für den jeweiligen Inhalt. Wie dieser Inhalt daraufhin formatiert wird, bestimmt das CSS - entweder das aus der Seite oder das vom Server mitgelieferten.
Standardmäßig wird primär zwischen sogenannten Block- und Inline-Elementen unterschieden (Tabellen fallen aus diesem Schema teilweise heraus): Erstere schaffen klar getrennte Unterteilungen (die auch durch einen Rahmen hervorgehoben werden können) und Letztere bleiben im Textfluss. Innerhalb eines Inline-Elements darf normalerweise kein Block-Element stehen. Das betrifft jedoch ausschließlich das HTML, nicht das CSS.
Es mit CSS nämlich durchaus möglich, ein Inline-Element rein optisch in ein Block-Element zu verwandeln - das geht mit der "display"-Eigenschaft. Die overflow-Eigenschaft hingegen bestimmt das Verhalten gegenüber dem Inhalt, insbesondere, wenn der Inhalt größer ist als das umgebende Element.
Bei all diesen wunderbaren Möglichkeiten muss man jedoch berücksichtigen, dass es einen Browser gibt, der die entsprechenden Standards nicht vollständig umsetzt und teilweise mit seltsamen Erweiterungen und Fehlern spickt.
Trotzdem ist das kein Grund, Stilangaben in den HTML-Code zu schreiben (bspw. background im body-Tag) - denn genau dafür, Elemente mit Stilangaben zu versehen, ist CSS gedacht.
Gruß, LX
--
RFC 1925, Satz 6: Es ist einfacher, ein Problem zu verschieben (...), als es zu lösen.
-
-
@@Gunnar:
CSS-Expressions sollten nicht häufiger als nötig ausgewertet werden. Das hieße in dem Falle evtl. nicht nur einmalige Auswertung, sondern auch auf 'resize'-Events zu reagieren. Aber nicht die CSS-Expressions in Endlosschleifen Ressourcen fressen lassen!
Das ist wahr - allerdings war das nur ein Beispiel, keine fertige Lösung.
Außerdem dürfte es sich anbieten, '-ms-interpolation-mode: bicubic' zu setzen.
Da hast Du an sich Recht, aber leider versteht diese proprietäre Eigenschaft nur der IE8 - und der hat im Moment noch unter 5% Verbreitung.
Gruß, LX
--
RFC 1925, Satz 6: Es ist einfacher, ein Problem zu verschieben (...), als es zu lösen.-
Hi,
Außerdem dürfte es sich anbieten, '-ms-interpolation-mode: bicubic' zu setzen.
Da hast Du an sich Recht, aber leider versteht diese proprietäre Eigenschaft nur der IE8
Nein, die MSDN sagt, ein IE "7 or later" wäre erforderlich.
Und dem IE 6 kann man das auch per Filter reinprügeln, siehe u.a. http://codecandies.de/2008/11/13/tweaking-image-resampling/
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.
-
-
-
-