Brauche Hilfe: Website-Hintergrund in Klavierlackoptik

[dertobinator]

Hallo,

Ich möchte für meine Seite den Hintergrund mit Klavierlackoptik haben. Oben dunkel und unten hell. Das ganze muss flexibel sein nach unten, da sich die Seitengröße immer ändert. Der Ausgangsfarbton ist #242221.

Weiß jemand, wie man sowas anstellt?

Danke schon mal und Gruß aus Hamburg

Tobi

[uwe367]

Hallo dertobinator und willkommen im :psc1:

Du willst also daß sich der Hintergrund dynamisch mit der Seite verändert?
Das wird nicht funktionieren da der Hintergrund ein statisches Element ist welches sich, günstigstenfalls, dem Bildschirm des Betrachters automatisch anpasst.

Der Hintergrund wird so definiert:
body {
background: #000000; /*Beispiel einer Hintergrundfarbe, hier schwarz*/
....
}

Man kann zwar eine fixe Höhe in Pixel oder Prozent angeben, aber daß sich der Hintergrund jeder Unterseite automatisch anpasst ist meines Wissens nach nicht möglich.

Hier würde ich einen Verlauf als Hintergrund nehmen. Mit web gradient (https://www.google.de/#q=web+gradient) kannst du dir CSS generierte Verläufe erstellen und diese in deine Seite einbauen, allerdings werden web gradients von älteren Browsern nicht unterstützt so daß du hier einen browserabhängien Fallback integrieren müßtest.

Der CSS Code für einen web farbverlauf sieht so aus:

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
Und hier ist auch schon der Fallback für alte Browser integriert.

Kurz und kanpp.. so wie du dir das vorstellst wird das meiner Meinung nach nicht machbar sein es sei denn daß es mittlerweile Techniken gibt die mir noch unbekannt sind.

[dertobinator]

Hallo, Uwe!

Danke für Deine Antwort.
Ich dachte, sowas könnte über ein gekacheltes Muster-gif in der stylesheet.css funzen. weiß aber nur, wie das mit Mustern ohne Verlauf funktioniert.

Gruß

Tobi

[uwe367]

Ein gekacheltes gif mit einem Verlauf wird sich wiederholen, aber sich nicht dynamisch ausdehnen. Wenn du z.B. ein gif mit 300x300px Größe hast, so wird es sich über den gesamten Hintergrund immer wieder wiederholen und wie das im Endeffekt aussieht muß ich sicher nicht erläutern.

Ich habe nochmal über die Geschichte mit den web-gradients nachgedacht. Rein theoretisch könnte das funktionieren so wie du dir das vorstellst da es sich hierbei ja nicht um ein fest vorgegebenes Bild handelt. Allerdings werden inkompatibele Browser nur die Farbe aus dem Fallback darstellen. Aber wie gesagt.. mach dir mal noch keine allzugroßen Hoffnungen. Das ist graue Theorie.

Ich habe bisher, eben wegen dieser Inkompatiblität, noch nicht damit gearbeitet, aber ich werde es mal ausprobieren. Kann aber etwas dauern.

[Jenny]

Hallo!

Per Script kann man auch in den älteren IEs CSS3 implementieren, z.B. mit dem Modernizr (http://modernizr.com/). Dort kannst du auch genau die Features angeben, die du benötigst, so dass das Script entsprechend schlank bleibt. Dann wird's nur noch problematisch bei deaktiviertem Javascript. Aber der Anteil der User, die weder Javascript noch einen halbwegs modernen Browser haben, dürfte verschwindend gering sein und somit vernachlässigbar.

[uwe367]

Hallo!
Aber der Anteil der User, die weder Javascript noch einen halbwegs modernen Browser haben, dürfte verschwindend gering sein und somit vernachlässigbar.
Wenn du heutzutage Javascript deaktivierst kannst du auch gleich CSS und HTML deaktivieren denn moderne Websites haben meist jQuery, Mootools, Bootstrap oder ein anderes Javascript Framework integriert, wobei Bootstrap nicht nur Javascript ist.