CSS-Problem: Background-Farbverlauf

Mein Problem: Ich möchte einen Farbverlauf, der über den gesamten Background verläuft. Mein Code

body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image:-moz-linear-gradient(50% 0% -90deg,rgb(0,255,0) 0%,rgb(255,255,0) 40%,rgb(255,255,0) 59%,rgb(255,255,0) 60%,rgb(255,0,0) 100%); 
background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(0,255,0)),color-stop(0.4, rgb(255,255,0)),color-stop(0.59, rgb(255,255,0)),color-stop(0.6, rgb(255,255,0)),color-stop(1, rgb(255,0,0)));
background-image:-webkit-linear-gradient(-90deg,rgb(0,255,0) 0%,rgb(255,255,0) 40%,rgb(255,255,0) 59%,rgb(255,255,0) 60%,rgb(255,0,0) 100%);
background-image:-o-linear-gradient(-90deg,rgb(0,255,0) 0%,rgb(255,255,0) 40%,rgb(255,255,0) 59%,rgb(255,255,0) 60%,rgb(255,0,0) 100%);
background-image:-ms-linear-gradient(-90deg,rgb(0,255,0) 0%,rgb(255,255,0) 40%,rgb(255,255,0) 59%,rgb(255,255,0) 60%,rgb(255,0,0) 100%);
background-image:linear-gradient(-90deg,rgb(0,255,0) 0%,rgb(255,255,0) 40%,rgb(255,255,0) 59%,rgb(255,255,0) 60%,rgb(255,0,0) 100%);
-ms-filter"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff00ff00,endColorstr=#ffff0000,GradientType=0)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff00ff00,endColorstr=#ffff0000,GradientType=0);
        margin: 0;
	padding: 0;
	color: #000;
}

funktioniert nicht korrekt. Geht das überhaupt? Wenn ja, wie?

Shade Of Mine

Und wo ist das Problem?

Rhombicosidodecahedron

Mein Glaskugel sagt:
`html, body {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

}

`

Meine Glaskugel findet es schade, dass du Uralt-IE unterstützen willst/musst.

Das Problem: der Farbverlauf wird - wenn überhaupt - nur innerhalb des Bereichs angezeigt, der Inhalt enthält. Ein einfaches background:#cff füllt aber den gesamten Body-Bereich.

@Rhombicosidodecahedron:
width: 100%;
height: 100%;

ist aber nicht wirklich dein Ernst oder?

Der IE9 ist auch nicht unbedingt Uralt-IE.

Shade Of Mine

Lin Lin schrieb:

Das Problem: der Farbverlauf wird - wenn überhaupt - nur innerhalb des Bereichs angezeigt, der Inhalt enthält. Ein einfaches background:#cff füllt aber den gesamten Body-Bereich.

Und welche Browser?
Wie sieht deine HTML Datei aus?

und fix mal den typo bei der IE version

Soviel Ekel-Code, Direktiven und Kompatibilitätsprobleme, wo man ein einfaches Hintergrundbild benutzen könnte? Wenn du einfach nur einen Farbverlauf willst, dann belegt so eine Datei auch mit sehr großen Ausmaßen nur wenige kiB. Ansonsten wirst du fast immer irgendwo ein Problem mit der Höhe kriegen. height/min-height war schon immer ein Krampf ...

Gut, frage ich anders. Ist es möglich, auf einer Webseite eine flächenfüllenden Farbverlauf zu realisieren? Der sich anpasst, wenn der Benutzer die Größe des Anwendungsfensters verändert? Wenn ja, wie?

Shade Of Mine

Lin Lin schrieb:

Gut, frage ich anders. Ist es möglich, auf einer Webseite eine flächenfüllenden Farbverlauf zu realisieren? Der sich anpasst, wenn der Benutzer die Größe des Anwendungsfensters verändert? Wenn ja, wie?

Sowas?
http://milewski.us/bugzamples/bz552698a.html

Shade Of Mine schrieb:

Lin Lin schrieb:

Gut, frage ich anders. Ist es möglich, auf einer Webseite eine flächenfüllenden Farbverlauf zu realisieren? Der sich anpasst, wenn der Benutzer die Größe des Anwendungsfensters verändert? Wenn ja, wie?

Sowas?
http://milewski.us/bugzamples/bz552698a.html

Im Opera 12 und im IE 9 ist kein Farbverlauf zu sehen. Einen weiteren Browser habe ich hier nicht (Firefox kommt mir sowieso nicht auf die Platte).

Shade Of Mine schrieb:

Lin Lin schrieb:

Im Opera 12 und im IE 9 ist kein Farbverlauf zu sehen. Einen weiteren Browser habe ich hier nicht (Firefox kommt mir sowieso nicht auf die Platte).

...

du willst keine Hilfe, oder?

Hilfe? Von welcher Hilfe sprichst Du? Was ich will, habe ich verständlich beschrieben. Ein einfaches "das geht mit HTML5/CSS3 nicht / so" - mehr brauchst als Hilfe oder Antwort nicht.

Dein Link zeigt hier nicht das gewünschte Ergebnis und beantwortet meine Frage auch nicht.

Shade Of Mine

Lin Lin schrieb:

Hilfe? Von welcher Hilfe sprichst Du? Was ich will, habe ich verständlich beschrieben. Ein einfaches "das geht mit HTML5/CSS3 nicht / so" - mehr brauchst als Hilfe oder Antwort nicht.

Es geht, ist aber wenig sinnvoll. Da der CSS3 Support noch nicht weit genug ist.

Dein Link zeigt hier nicht das gewünschte Ergebnis und beantwortet meine Frage auch nicht.

Der Link beantwortet genau deine Frage. Sofern du genau das meinst was ich denke. Deshalb die Frage ob du sowas suchst.

Die Beispiel implementierung ist lediglich fuer Firefox und Webkit-Browser. Das fuer Opera anzupassen ist trivial.

Einziges Problem das dann noch bleibt ist IE - aber der ist immer ein Problemkind. Aber das haette ich dir auch noch verraten...

Enttäuschendes Ergebnis für meine ersten Gehversuche mit HTML5. Ein einfacher Farbverlauf geht nicht. Aber vielleicht hat ja noch jemand eine Idee???

Shade Of Mine

Ein letzter Versuch:

Was genau ist an der Lösung auf der von mir verlinkten Seite nicht für dich passend?

IE support ist ein eigenes Thema über das wir gerne nachher reden können.

Shade Of Mine schrieb:

Ein letzter Versuch:

Was genau ist an der Lösung auf der von mir verlinkten Seite nicht für dich passend?

IE support ist ein eigenes Thema über das wir gerne nachher reden können.

Hallo Shade Of Mine,

an der Lösung auf der von Dir verlinkten Seite passt nicht, daß bei mir gar kein Farbverlauf zu sehen ist. Ich benutze den Opera. Mein Code zeigt ja einen Verlauf, aber eben nicht für die gesamte Seite wie bei z.B. background:#cfee66e, sondern nur für einen Bereich mit Inhalt. Ich dachte ich hätte irgendetwas falsch gemacht, aber scheinbar geht der CSS3 Support wirklich noch nicht weit genug.

Einige Dinge, die ich mit HTML5 probiert habe, wie z.B. Box-Schatten, fonts usw. funktionierten. Die Sachen, die ich von http://www.mediaevent.de/css/gradient.html ausprobbiert habe, auch. Nur eben nicht für den GESAMTEN Hintergrund.

PS: Dies ist KEIN Troll-Beitrag!

Shade Of Mine

Lin Lin schrieb:

an der Lösung auf der von Dir verlinkten Seite passt nicht, daß bei mir gar kein Farbverlauf zu sehen ist. Ich benutze den Opera.

Wenn du wirklich nicht in der Lage sein solltest einen Browser mit den meistverwendeten Renderengines (Gecko und WebKit) dann frage ich mich natuerlich wie du deine Seiten testen willst.

Aber selbst wenn es dir unmoeglich ist eine dieser Renderengines zu bekommen, dann bleibt dir immernoch die Moeglichkeit den Code fuer Opera anzupassen.

Wir haben folgenden Code (wie auf der Seite ersichtlich):

background-image: -moz-linear-gradient(top, #ed5900, #eff108);
		background-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff));
		background-image: -webkit-linear-gradient(top, #00ebab, white);

dies fuer Opera anzupassen ist easy:
aus

background-image: -moz-linear-gradient(top, #ed5900, #eff108);

wird

background-image: -o-linear-gradient(top, #ed5900, #eff108);

fertig.

Nun betrachte das Ergebnis und sage mir ob du sowas gesucht hast.

Vielen Dank für Deinen Code, aber auch damit funktioniert es nicht wie gewünscht. Schau Dir mal diesen Code in Deinem Browser an:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Background-Gradient</title>
<style type="text/css">
<!--
body {
	/* background-color: #ed5900; */
	background-image: -o-linear-gradient(top, #ed5900, #eff108);
	background-repeat: no-repeat;
}
-->
</style>
</head>
<body>
<p>Text ...</p>
</body>

Der Farbverlauf des Hintergrunds beschränkt sich auf den Text und nicht über den gesamten Hintergrund. Kommentierst Du background-image: und aktivierst Du background-color: ist der gesamte Hintergrund farbig. Aber eben nur einfarbig.

schmidt-webdesign.net

Das wirst du mit CSS3 gegenwärtig (und wohl auch in absehbarer Zeit) nicht lösen können, weil da derzeit zu viele Köche den Brei verderben.

Sehr einfach ist deine Aufgabe aber mittels SVG (Scalable Vector Graphics) zu lösen. Und das Ergebnis sieht dann sogar auf (fast) allen aktuellen Browsern gleich aus (sogar die Browser-Katastrophe Internet Explorer Version 8/9 spielt problemlos mit).

Zusätzlicher Lesestoff.

Das der CSS3-Support noch nicht weit genug ist hatte Shade Of Mine auch schon geschrieben. Wundert mich, weil alle Welt HTML5 lobt.

Hast Du für SVG ein Beispiel-Code oder einen Link? Google hat nichts in der Richtung gefunden.

schmidt-webdesign.net

Man nehme eine SVG-Datei "bg.svg" oder erstellt sich eine auf die Schnelle beispielsweise mit svg-edit:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<linearGradient id="bg" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="100">
	<stop  offset="0" style="stop-color:#ED5900"/>
	<stop  offset="1" style="stop-color:#EFF108"/>
</linearGradient>
<rect fill="url(#bg)" width="100" height="100"/>
</svg>

gebe eine Priese HTML zu seinem Code:

body { 
 ...
 background:url(bg.svg);
 ...
}

und lasse das ganze in seinem Lieblings-Browser bis zur Anzeige garen. Fertig!

Datei-Name und Farben lassen sich natürlich je nach Geschmack anpassen ...

es funktioniert auch mit css3, z.b. so (getestet in webkit):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Background-Gradient</title>
<style type="text/css">
<!--
.background {
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 z-index: -1;
 background-image: -webkit-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 20%, #d9d9d9 60%, #bfbfbf);
}
--> 
</style> 
</head> 
<body>
<div class="background"></div>
<p>Text ...</p>
</body>