Hintergrund Farbüberlauf - wie?

[insanity]

Hi @ll,
möchte gerne auf meiner aktuellen Homepage einen Farbüberlauf einfügen im Hintergrund. Möchte das der Hintergrund von oben Weiß nach unten Schwarz wird. Hab zwar schon einige Seiten erstellt aber mit fällt gerade auf das ich das noch nie gebraucht hab. *gg* Hab zwar bereits so meine eigenen Ideen wie ich das machen kann aber eventuell hat ja jemand eine total simple Lösung parat? Wichtig ist halt das es egal ist welche Auflösung der User benutzt, der Hintergrund soll fixiert sein und immer über die ganze Seite gehen.
Gute Nacht dann noch, Daniel

 

[da_danny]

Hi,
du könntest das per CSS einbinden.

Der CSS Code währe folgender:

body {
background-image : url(images/Hintergrund.jpg);
background-position : center;
background-repeat : repeat-x;
background-color : #000000;
color : #ffffff;
}

Das Hintergrundbild sollte einfach ein langer 1px breiter Streifen sein. der so lang wie dein Verlauf sein sollte und natürlich im Verzeichniss "images" liegen sollte. Wenn der Verlauf zu kurz ist kannst du in CSS auch noch eine Hintergrundfarbe festlegen und den Verlauf somit verlängern.

Falls es nicht klappt einfach nochmal nachfragen.

Grüße

 

[insanity]

hmm, das sieht auf den ersten blick ja ganz vernünftig aus aber dann ist der verlauf ja genau so lang wie meine grafik hoch ist? und alles darunter ist dann die hintergrundfarbe die ich festgelegt hab. das ist schonmal ne gute möglichkeit mit der ich durchaus leben könnte, aber wenn ich nun wollte das bei jemanden dessen anzeigen bereich im browser 800px hoch ist der farbüberlauf eben genau über 800px geht und bei jemandem dessen anzeige bereich 1024px ist dieser über die 1024px und so weiter, gibts da eine ähnlich leichte möglichkeit in css?

 

[da_danny]

hm also ich kenne da leider keine, ich habe es bis jetzt immer so gelöst.
Vielleicht findest du auf dieser Seite einwenig Hilfe oder eine andere Lösung: http://www.css4you.de/

Dort gibt es immer gute Ideen, ansonsten lass es doch einfach so wie es ist mit einem Verlauf der eben nicht über den ganzen Hintergrund geht, das fällt auch nicht umbedingt auf und sieht auch gut aus.:-D

Viele Grüße Daniel

 

[stk]

Moin,

die gezeigte Lösung ist in der Tat die einzig mögliche, da Verläufe nicht durch die Browser berechnet werden können. Wenn Du's etwas schlanker schreiben magst kannst auch

body {
  background: #000 url(/pfad/zum/bild.gif) repeat-x top center;
  }

eintragen. Die einzige Möglichkeit, die ich kenne um per Javascript mit dem CSS auf unterschiedliche Viewportgrößen zu reagieren, beschreibt Cameron Adams:

http://www.themaninblue.com/writing/perspective/2004/09/21/

Er geht zwar in seinem Beispiel von unterschiedlichen Fensterbreiten aus, aber das läßt sich ja auch auf Höhe übertragen. Allerdings ist das ehrlich gesagt nichts das ich für die Änderung eines Farbverlaufs im Hintergrund anwenden würde. Das wäre mit Kanonen auf Spatzen geschossen. Dazu kommt, das Du für jede Variante eine extra Hintergrundgrafik brauchst, sprich: auch hier kannst eigentlich nur mit ein paar beliebig gewählten Voreinstellungen arbeiten und hast für alles was dazwischen passiert immer noch die entsprechende Einschränkung. Also wofür?

Gruß Stefan

 

[arc]

Hallo,

zäumen wir das Pferd doch mal von hinten auf: Welchen Sinn macht ein über die gesamte Seite gehender Farbverlauf (es heißt Verlauf, nicht Überlauf) von Schwarz nach Weiß?
Damit handelst du dir ein paar unschöne Probleme ein, deren vordergründigstes sein dürfte, das sich (je nach Textfarbe) an bestimmten Stellen dein Text nur noch sehr schwer bis gar nicht lesen lässt.
Desweiteren neigen räumlich und farblich so weit gespreizte Verläufe zur deutlichen Streifenbildung - sieht unschön aus.

Kurz: Ich würde mir das Hintergund noch mal überlegen .

Aron

 

[insanity]

Hallo,

zäumen wir das Pferd doch mal von hinten auf: Welchen Sinn macht ein über die gesamte Seite gehender Farbverlauf (es heißt Verlauf, nicht Überlauf) von Schwarz nach Weiß?
Damit handelst du dir ein paar unschöne Probleme ein, deren vordergründigstes sein dürfte, das sich (je nach Textfarbe) an bestimmten Stellen dein Text nur noch sehr schwer bis gar nicht lesen lässt.
Desweiteren neigen räumlich und farblich so weit gespreizte Verläufe zur deutlichen Streifenbildung - sieht unschön aus.

Kurz: Ich würde mir das Hintergund noch mal überlegen .

Aron

da hast du wohl recht. deshalb hatte ich schwarz und weiß nur als beispiel genannt, die farben gehen von weiß nach hell grau... der text wird aber auf diesem bereich auch garnicht zu sehen sein sondern hat selbst ne box mit anderem, einfarbigem, hintergrund auf dem er angezeigt wird. ist also wirklich nur spielerei damit der hintergrund der page nicht komplett einfarbig ist...

ich denke ich werde eine grafik in höhe von 800px nehmen, das müsste dann recht ok aussehen.

 

[FirePot]

Mir fällt da gerade Wordpress ein, da kann man auch bei dem Std. Theme den Verlauf einstellen. Also müsste du dir nen PHP Script schreiben, das dir nen Verlauf als Bild Datei ausgibt, dass kannste dann mit dem Javascript per Ajax Request abrufen, oder hab ich einen Denkfehler gemacht?!

Nelson

 

[fruitbasket]

Der Hintergrund lässt sich nicht skalieren; es sei denn Du möchtest wirklich mit Ajax o.ä. die Seitendimensionen auslesen und den Code immer dynamisch anpassen. Aber das ist unzuverlässig und dürfte in den meistne Fällen einfach zu viel Mühe sein.

Aber ein wichtiger Tip noch: Mach das Bild breiter als nur 1px! Die Dateigröße wird dabei nur unwesentlich höher, da die meisten Formate komprimiert sind - ABER! der Rechenr des Users spart angeblich viel Arbeit, weil er nicht so viele einzelne Bilder zusammenpuzzlen muss.

 

[Hilarious]

Der Hintergrund lässt sich nicht skalieren; es sei denn Du möchtest wirklich mit Ajax o.ä. die Seitendimensionen auslesen und den Code immer dynamisch anpassen. Aber das ist unzuverlässig und dürfte in den meistne Fällen einfach zu viel Mühe sein.

Aber ein wichtiger Tip noch: Mach das Bild breiter als nur 1px! Die Dateigröße wird dabei nur unwesentlich höher, da die meisten Formate komprimiert sind - ABER! der Rechenr des Users spart angeblich viel Arbeit, weil er nicht so viele einzelne Bilder zusammenpuzzlen muss.

Ich will jetzt nicht pingelig erscheinen, aber mit »Ajax« liest man keine Seitendimensionen aus, wohl mit JavaScript, was nur eine Bestandteil der AJAX-Idee ist. Es ist noch weniger sinnvoll den Code dynamisch anzupassen, da wir hier ja eine Lösung ausschließlich für den Browser (Client) suchen. Stefan hat da schon in die richtige Richtung gewiesen, besonders praktikabel ist dies jedoch nicht, da ein Verlauf dann schnell unschön wird, wenn man ihn streckt oder spreitzt.

Fruitbasket, Dein Tipp, das Bild breiter zu machen, ist meiner Meinung nach mehr Legende als Wahrheit, denn der Browser muss das Bild, welches er einmal geladen hat, nur erneut im Speicher verschieben, dabei ist es, vor allem bei den heutigen System, ziemlich egal, ob es 1px oder 20px breit ist. Die aktuellen Browser sind vor allem auf die Verwendung von CSS-Umsetzungen optimiert und das ist vor allem eine Frage des Arbeitsspeichers und weniger der CPU.

Sorry, aber meinen Erfahrungen nach ist ein 1-Pixel-Streifen die beste Lösung, da zum Zeitpunkt der Umsetzung die Ladezeit schwerwiegender sein dürfte als die Umsetzungszeit.

Mit dem 1-Pixel-Streifen kann man nur mit verschiedenen Dateiformaten auch recht verschiedene Erfahrungen machen:
o JPG: erreicht eine hohe Kompression, erzeugt also sehr kleine Dateien, wobei das Ergebnis bei einem Verlauf leider nicht hohen Qualitätsmaßstäben gerecht wird.
o GIF: Der Algorithmus von GIF89a versucht vor allem horizontal (also zeilenweise) zu komprimieren, daher sind dürfte der Verlauf (1px breit, 1000px hoch) eine größere Datei zum Ergebnis haben. Dazu kommt, dass GIF nur mit höchsten 256 Farben umgehen kann, was bei einem sanften Verlauf ziemlich unschön wird.
o PNG: Dieses Format kann nicht nur Wiederholungen entdecken und dadurch komprimieren, sondern auch Verläufe, also ständig wechselnde Farbwerte, in einigen Fällen gut komprimieren. Vor allem in Deinem Falle bietet es sich an, ein 32-Bit-PNG anzulegen (auch hier ein Pixel breit und beliebig hoch). Die Dateigröße ist überraschend klein, bei bester Qualität. Ich habe zum Beispiel auf meiner kleine Spielwiese einen zarten Grauverlauf in den Hintergrund gesetzt, der ein Pixel breit und 800 Pixel hoch ist. Die Datei »wiegt« gerade mal 0,3 KB und wird horizontal dubliziert. Der dafür verwendete Code entspricht den Hinweisen von da_danny von stk.

body { background: #474747 url(../img/background.png) repeat-x; }