Hintergrund Farbverlauf mit CSS

[piru]

Hallo,

ich versuche den Hintergrund mit CSS (einen Verlauf) zu machen. Ich habe den mit Colorzilla - Ultimate CSS Gradient Generator erzeugt.
Ich habe bei der Größe 50 x 50 px eingegeben, und wenn ich Orientation: Horizontal eingebe sieht alles continuerly aus (schön), wenn ich Orientation Vertical eingebe sieht abgehackt aus (jede 50 px).
Wie kann ich machen, damit Vertical nicht abgehackt wird, und genau so wie bei Horizontal aussieht?

Folgende Codes wurden erzeugt:

Vertical:

Code: CSS  [Auswählen]

background: #e8ac71; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4YWM3MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYWZjODUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #e8ac71 0%, #fafc85 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8ac71), color-stop(100%,#fafc85)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e8ac71 0%,#fafc85 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e8ac71 0%,#fafc85 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e8ac71 0%,#fafc85 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e8ac71 0%,#fafc85 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8ac71', endColorstr='#fafc85',GradientType=0 ); /* IE6-8 */
 

Horizontal:

Code: CSS  [Auswählen]

background: #e8ac71; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4YWM3MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYWZjODUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  #e8ac71 0%, #fafc85 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#e8ac71), color-stop(100%,#fafc85)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #e8ac71 0%,#fafc85 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #e8ac71 0%,#fafc85 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #e8ac71 0%,#fafc85 100%); /* IE10+ */
background: linear-gradient(to right,  #e8ac71 0%,#fafc85 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8ac71', endColorstr='#fafc85',GradientType=1 ); /* IE6-8 */
 

Gruß piru

Linkback: https://www.modified-shop.org/forum/index.php?topic=30225.0

[jumpM]

Hallo,

hast Du mal versucht im Horizontal Code in Zeile 5 anstatt:

left top, right top,

top-left, top right,

einzusetzen??

gruss
Robert

[piru]

Hallo Robert,

die Horizontal sieht ok aus, die Vertical nicht.
Ich habe aber trotzdem den Horizontal Code geändert wie du es geschrieben hast, bleibt genau so gut wie vorher, aber immer noch Horizontal.

Gruß piru

[webald]

könnte das an dem Bild liegen? stimmt der Verlauf ohne das Bild?

[piru]

Es gibt kein Bild. Ich habe eine Testdatei gemacht, nur mit dem Code, die aus Colorzilla kam, plus etwas html, damit ich das sehen kann, wie folgt:

Code: CSS  [Auswählen]

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">

body {
background: #e8ac71; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4YWM3MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYWZjODUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #e8ac71 0%, #fafc85 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8ac71), color-stop(100%,#fafc85)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e8ac71 0%,#fafc85 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e8ac71 0%,#fafc85 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e8ac71 0%,#fafc85 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e8ac71 0%,#fafc85 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8ac71', endColorstr='#fafc85',GradientType=0 ); /* IE6-8 */

}
</style>
</head>

<body>
</body>
</html>
 

Das ist der Code für die Vertical (nicht gut).

Für den Horizontal (gut) ist so:

Code: CSS  [Auswählen]

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">


body {
background: #e8ac71; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4YWM3MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYWZjODUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  #e8ac71 0%, #fafc85 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#e8ac71), color-stop(100%,#fafc85)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #e8ac71 0%,#fafc85 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #e8ac71 0%,#fafc85 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #e8ac71 0%,#fafc85 100%); /* IE10+ */
background: linear-gradient(to right,  #e8ac71 0%,#fafc85 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8ac71', endColorstr='#fafc85',GradientType=1 ); /* IE6-8 */



}
</style>
</head>

<body>
</body>
</html>

Wenn du diese Code einfach in einer test.html Datei machst und tested vielleicht verstehst du was ich meine (1 Bild sagt mehr als tausende Worte in deutsch von mir) 

Gruß piru

[jumpM]

Hallo probier mal dies:

Code: PHP  [Auswählen]

<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<h3>Linear Gradient - Top to Bottom</h3>
<p>This linear gradient starts at the top. It starts red, transitioning to blue:</p>

<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>
</html>

Gruss
robert

[noRiddle (revilonetz)]

Code: CSS  [Auswählen]

background-image:-o-linear-gradient(to bottom, #e8ac71 0%, #fafc85 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #e8ac71), color-stop(100%, #fafc85)); /*android browser lt 4.0*/
background-image:-webkit-linear-gradient(to bottom, #e8ac71 0%, #fafc85 100%);
background-image:-moz-linear-gradient(to bottom, #e8ac71 0%, #fafc85 100%);
background-image:-ms-linear-gradient(to bottom, #e8ac71 0%, #fafc85 100%);
background-image:linear-gradient(to bottom, #e8ac71 0%, #fafc85 100%);

Gruß,
noRiddle

[web0null]

@piru,

Deine Varianten sind doch eh in Ordnung, wobei ich auch die Version (von noRiddle) mit "background-image" vorziehe, da flexibler.

...nur der "body" braucht für den Vertical-Verlauf auch einen Inhalt, oder du setzt eine Höhe, für den "body".
Gruß

[piru]

@web0null,

das war der Trick, die Höhe. Ich habe vor
 

Code: CSS  [Auswählen]

body {

folgendes hinzugefügt:

Code: CSS  [Auswählen]

html {height: 100%;}

und funktioniert perfekt, auch mit meinem original Code. Ich habe aber den Code von @noRiddle genommen, mit background-image.

Danke euch! und auch an @jumpM, funktioniert auch, nur dort ist eine feste Höhe.

Gruß piru

[piru]

Also, ich musste auch in dem Body die Höhe hinstellen. Aber etwas klappt noch nicht perfekt.

Ich habe es so:

Code: CSS  [Auswählen]

html {height: 100%;
        }
body#shadow {
    line-height: 1.5em;
    height: 100%;        
    background-image:-o-linear-gradient(to bottom, #e8ac71 0%, #fafc85 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #e8ac71), color-stop(100%, #fafc85)); /*android browser lt 4.0*/
    background-image:-webkit-linear-gradient(to bottom, #e8ac71 0%, #fafc85 100%);
    background-image:-moz-linear-gradient(to bottom, #e8ac71 0%, #fafc85 100%);
    background-image:-ms-linear-gradient(to bottom, #e8ac71 0%, #fafc85 100%);
    background-image:linear-gradient(to bottom, #e8ac71 0%, #fafc85 100%);
}

Wenn ich das so lasse, auf die kurzere Seiten sieht gut aus (kurz.jpg), auf die längere Seiten wird unten nicht mehr angezeigt (lang.jpg).
Wenn ich aber sowas mache

Code: CSS  [Auswählen]

/*html {height: 100%;
        }*/

dann werden bei den kurzeren Seiten unten kein Verlauf angezeigt (kurz_ausk.jpg) und die längeren Seiten sehen gut aus (lang_ausk.jpg).

Gruß piru

[noRiddle (revilonetz)]

Das bedeutet, daß der Container body sich nicht über den ganzen Raum des Browserfensters erstreckt.
Hast du mal einen Link dazu ?

Ansonsten versuche mal im CSS:

Code: CSS  [Auswählen]

html {height:100%;}
body {height:100%;}

Gruß,
noRiddle

[piru]

Danke @noRiddle für rein gucken, und für die ganze Zeit, die du dafür geöpfert hast 

Ich poste die Lössung hier, falls noch jemand Interesse hat:

Code: CSS  [Auswählen]

html {
height: 100%;
font-size: 100.01%;
}

body#shadow {
line-height: 1.5em;
height: 100%;
background: -o-linear-gradient(to bottom, #E8AC71 0%, #FAFC85 100%) no-repeat fixed 0 0 rgba(0, 0, 0, 0);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #E8AC71), color-stop(100%, #FAFC85)) no-repeat fixed 0 0 rgba(0, 0, 0, 0); /*older webkit browsers*/
background: -webkit-linear-gradient(to bottom, #E8AC71 0%, #FAFC85 100%) no-repeat fixed 0 0 rgba(0, 0, 0, 0);
background: -ms-linear-gradient(to bottom, #E8AC71 0%, #FAFC85 100%) no-repeat fixed 0 0 rgba(0, 0, 0, 0);
background: -moz-linear-gradient(to bottom, #E8AC71 0%, #FAFC85 100%) no-repeat fixed 0 0 rgba(0, 0, 0, 0);
background: linear-gradient(to bottom, #E8AC71 0%, #FAFC85 100%) no-repeat fixed 0 0 rgba(0, 0, 0, 0);
}

Ich hatte aber auch noch drin in einer anderen .css Datei:

Code: CSS  [Auswählen]

html {
background: #FFFFFF;
}
 

Als das weg war, war das Problem gelöst.

Danke nochmal!

Gruß piru