Hintergrundfarbe 2 farbig

**Flave_** · 10.09.2009 12:42

Hallo,

ich weiß, es gab schon unzählige solcher Threads, das hört man nämlich jedes mal, aber ich hab in der sufu nix gefunden, liegt aber auch daran das ich nicht genau weiß nach was ich suchen muss.

ich würd gern die Hintergrundfarbe meiner Page bearbeiten www.sc-endorf.de .
soweit kein problem, ich bearbeite in der css datei einfach den "body"

body {
background-color:#EDBF1E;

ja ne is kla, aber ich will keine Einfarbige Hintergrundfarbe haben, sondern eben 2 farbig.
also entweder in nem Farbverlauf von oben nach unten, also das oben heller is,
und nach unten immer dunkler wird, und wenn das nicht geht, einfach abewechselnd 2 Farben in Streifen von oben nach unten, wie ein Fußballtrikot!

Wie gesagt, hab scho gesucht, aber leider nicht das passende gefunden :-(

**dersu** · 10.09.2009 12:54

Hallo
Naja weisst du ich denke halt dass du im falschen Forum suchst. Das ist eigentlich nicht wirklich eine Joomla spezifische Frage.

Trotzdem will ich jetzt nicht so sein:
Farbverlauf kannst du mit reinem CSS lösen, ist aber ziemlich kompliziert und darum rate ich dir zu einem ganz normalen Hintergrundbild welches du per CSS dann je nach Wunsch in x-, oder y-Richtung wiederholend anzeigen lässt.

z.B:
body {
background-image: url(bg.gif);
background-repeat: repeat-x;
}

**chr-hl** · 10.09.2009 12:58

Passende (kleine) Grafik erstellen und mit css (background-image, background-repeat) einbinden?

**infernalshade** · 10.09.2009 13:21

Farbverläufe kann man mit REINEM CSS lösen?! Das geht meiner Meinung nach nicht...ausser man trickst z.b. mit hunderten von untereinanderliegenden div's.....und das ist...naja...keine Lösung

Soviel ich aber weis wird die nächste CSS-Version Verläufe unterstützen...

Mit Grafiken bekommst du das also am besten hin

**albatros** · 10.09.2009 13:39

Hi,

gerade frisch gegoogelt http://www.seidling.info/css-farbverlauf/vertikal/

Gruß

albatros

**infernalshade** · 10.09.2009 13:56

Ähm...

Code:

    <div id="verlauf">
      <div style="border-color:#33AA01;border-color-top:#33AA00;"></div>
      <div style="border-color:#33AA03;border-color-top:#33AA02;"></div>
      <div style="border-color:#33AA05;border-color-top:#33AA04;"></div>
      <div style="border-color:#33AA07;border-color-top:#33AA06;"></div>
      <div style="border-color:#33AA09;border-color-top:#33AA08;"></div>
      <div style="border-color:#33AA0B;border-color-top:#33AA0A;"></div>
      <div style="border-color:#33AA0D;border-color-top:#33AA0C;"></div>
      <div style="border-color:#33AA0F;border-color-top:#33AA0E;"></div>

      <div style="border-color:#33AA11;border-color-top:#33AA10;"></div>
      <div style="border-color:#33AA13;border-color-top:#33AA12;"></div>
      <div style="border-color:#33AA15;border-color-top:#33AA14;"></div>
      <div style="border-color:#33AA17;border-color-top:#33AA16;"></div>
      <div style="border-color:#33AA19;border-color-top:#33AA18;"></div>
      <div style="border-color:#33AA1B;border-color-top:#33AA1A;"></div>
      <div style="border-color:#33AA1D;border-color-top:#33AA1C;"></div>
      <div style="border-color:#33AA1F;border-color-top:#33AA1E;"></div>
      <div style="border-color:#33AA21;border-color-top:#33AA20;"></div>

      <div style="border-color:#33AA23;border-color-top:#33AA22;"></div>
      <div style="border-color:#33AA25;border-color-top:#33AA24;"></div>
      <div style="border-color:#33AA27;border-color-top:#33AA26;"></div>
      <div style="border-color:#33AA29;border-color-top:#33AA28;"></div>
      <div style="border-color:#33AA2B;border-color-top:#33AA2A;"></div>
      <div style="border-color:#33AA2D;border-color-top:#33AA2C;"></div>
      <div style="border-color:#33AA2F;border-color-top:#33AA2E;"></div>
      <div style="border-color:#33AA31;border-color-top:#33AA30;"></div>
      <div style="border-color:#33AA33;border-color-top:#33AA32;"></div>

      <div style="border-color:#33AA35;border-color-top:#33AA34;"></div>
      <div style="border-color:#33AA37;border-color-top:#33AA36;"></div>
      <div style="border-color:#33AA39;border-color-top:#33AA38;"></div>
      <div style="border-color:#33AA3B;border-color-top:#33AA3A;"></div>
      <div style="border-color:#33AA3D;border-color-top:#33AA3C;"></div>
      <div style="border-color:#33AA3F;border-color-top:#33AA3E;"></div>
      <div style="border-color:#33AA41;border-color-top:#33AA40;"></div>
      <div style="border-color:#33AA43;border-color-top:#33AA42;"></div>
      <div style="border-color:#33AA45;border-color-top:#33AA44;"></div>

      <div style="border-color:#33AA47;border-color-top:#33AA46;"></div>
      <div style="border-color:#33AA49;border-color-top:#33AA48;"></div>
      <div style="border-color:#33AA4B;border-color-top:#33AA4A;"></div>
      <div style="border-color:#33AA4D;border-color-top:#33AA4C;"></div>
      <div style="border-color:#33AA4F;border-color-top:#33AA4E;"></div>
      <div style="border-color:#33AA51;border-color-top:#33AA50;"></div>
      <div style="border-color:#33AA53;border-color-top:#33AA52;"></div>
      <div style="border-color:#33AA55;border-color-top:#33AA54;"></div>
      <div style="border-color:#33AA57;border-color-top:#33AA56;"></div>

      <div style="border-color:#33AA59;border-color-top:#33AA58;"></div>
      <div style="border-color:#33AA5B;border-color-top:#33AA5A;"></div>
      <div style="border-color:#33AA5D;border-color-top:#33AA5C;"></div>
      <div style="border-color:#33AA5F;border-color-top:#33AA5E;"></div>
      <div style="border-color:#33AA61;border-color-top:#33AA60;"></div>
      <div style="border-color:#33AA63;border-color-top:#33AA62;"></div>
      <div style="border-color:#33AA65;border-color-top:#33AA64;"></div>
      <div style="border-color:#33AA67;border-color-top:#33AA66;"></div>
      <div style="border-color:#33AA69;border-color-top:#33AA68;"></div>

      <div style="border-color:#33AA6B;border-color-top:#33AA6A;"></div>
      <div style="border-color:#33AA6D;border-color-top:#33AA6C;"></div>
      <div style="border-color:#33AA6F;border-color-top:#33AA6E;"></div>
      <div style="border-color:#33AA71;border-color-top:#33AA70;"></div>
      <div style="border-color:#33AA73;border-color-top:#33AA72;"></div>
      <div style="border-color:#33AA75;border-color-top:#33AA74;"></div>
      <div style="border-color:#33AA77;border-color-top:#33AA76;"></div>
      <div style="border-color:#33AA79;border-color-top:#33AA78;"></div>
      <div style="border-color:#33AA7B;border-color-top:#33AA7A;"></div>

      <div style="border-color:#33AA7D;border-color-top:#33AA7C;"></div>
      <div style="border-color:#33AA7F;border-color-top:#33AA7E;"></div>
      <div style="border-color:#33AA81;border-color-top:#33AA80;"></div>
      <div style="border-color:#33AA83;border-color-top:#33AA82;"></div>
      <div style="border-color:#33AA85;border-color-top:#33AA84;"></div>
      <div style="border-color:#33AA87;border-color-top:#33AA86;"></div>
      <div style="border-color:#33AA89;border-color-top:#33AA88;"></div>
      <div style="border-color:#33AA8B;border-color-top:#33AA8A;"></div>
      <div style="border-color:#33AA8D;border-color-top:#33AA8C;"></div>

      <div style="border-color:#33AA8F;border-color-top:#33AA8E;"></div>
      <div style="border-color:#33AA91;border-color-top:#33AA90;"></div>
      <div style="border-color:#33AA93;border-color-top:#33AA92;"></div>
      <div style="border-color:#33AA95;border-color-top:#33AA94;"></div>
      <div style="border-color:#33AA97;border-color-top:#33AA96;"></div>
      <div style="border-color:#33AA99;border-color-top:#33AA98;"></div>
      <div style="border-color:#33AA9B;border-color-top:#33AA9A;"></div>
      <div style="border-color:#33AA9D;border-color-top:#33AA9C;"></div>
      <div style="border-color:#33AA9F;border-color-top:#33AA9E;"></div>

      <div style="border-color:#33AAA1;border-color-top:#33AAA0;"></div>
      <div style="border-color:#33AAA3;border-color-top:#33AAA2;"></div>
      <div style="border-color:#33AAA5;border-color-top:#33AAA4;"></div>
      <div style="border-color:#33AAA7;border-color-top:#33AAA6;"></div>
      <div style="border-color:#33AAA9;border-color-top:#33AAA8;"></div>
      <div style="border-color:#33AAAB;border-color-top:#33AAAA;"></div>
      <div style="border-color:#33AAAD;border-color-top:#33AAAC;"></div>
      <div style="border-color:#33AAAF;border-color-top:#33AAAE;"></div>
      <div style="border-color:#33AAB1;border-color-top:#33AAB0;"></div>

      <div style="border-color:#33AAB3;border-color-top:#33AAB2;"></div>
      <div style="border-color:#33AAB5;border-color-top:#33AAB4;"></div>
      <div style="border-color:#33AAB7;border-color-top:#33AAB6;"></div>
      <div style="border-color:#33AAB9;border-color-top:#33AAB8;"></div>
      <div style="border-color:#33AABB;border-color-top:#33AABA;"></div>
      <div style="border-color:#33AABD;border-color-top:#33AABC;"></div>
      <div style="border-color:#33AABF;border-color-top:#33AABE;"></div>
      <div style="border-color:#33AAC1;border-color-top:#33AAC0;"></div>
      <div style="border-color:#33AAC3;border-color-top:#33AAC2;"></div>

      <div style="border-color:#33AAC5;border-color-top:#33AAC4;"></div>
      <div style="border-color:#33AAC7;border-color-top:#33AAC6;"></div>
      <div style="border-color:#33AAC9;border-color-top:#33AAC8;"></div>
      <div style="border-color:#33AACB;border-color-top:#33AACA;"></div>
      <div style="border-color:#33AACD;border-color-top:#33AACC;"></div>
      <div style="border-color:#33AACF;border-color-top:#33AACE;"></div>
      <div style="border-color:#33AAD1;border-color-top:#33AAD0;"></div>
      <div style="border-color:#33AAD3;border-color-top:#33AAD2;"></div>
      <div style="border-color:#33AAD5;border-color-top:#33AAD4;"></div>

      <div style="border-color:#33AAD7;border-color-top:#33AAD6;"></div>
      <div style="border-color:#33AAD9;border-color-top:#33AAD8;"></div>
      <div style="border-color:#33AADB;border-color-top:#33AADA;"></div>
      <div style="border-color:#33AADD;border-color-top:#33AADC;"></div>
      <div style="border-color:#33AADF;border-color-top:#33AADE;"></div>
      <div style="border-color:#33AAE1;border-color-top:#33AAE0;"></div>
      <div style="border-color:#33AAE3;border-color-top:#33AAE2;"></div>
      <div style="border-color:#33AAE5;border-color-top:#33AAE4;"></div>
      <div style="border-color:#33AAE7;border-color-top:#33AAE6;"></div>

      <div style="border-color:#33AAE9;border-color-top:#33AAE8;"></div>
      <div style="border-color:#33AAEB;border-color-top:#33AAEA;"></div>
      <div style="border-color:#33AAED;border-color-top:#33AAEC;"></div>
      <div style="border-color:#33AAEF;border-color-top:#33AAEE;"></div>
      <div style="border-color:#33AAF1;border-color-top:#33AAF0;"></div>
      <div style="border-color:#33AAF3;border-color-top:#33AAF2;"></div>
      <div style="border-color:#33AAF5;border-color-top:#33AAF4;"></div>
      <div style="border-color:#33AAF7;border-color-top:#33AAF6;"></div>
      <div style="border-color:#33AAF9;border-color-top:#33AAF8;"></div>

      <div style="border-color:#33AAFB;border-color-top:#33AAFA;"></div>
      <div style="border-color:#33AAFD;border-color-top:#33AAFC;"></div>
      <div style="border-color:#33AAFF;border-color-top:#33AAFE;"></div>
    </div>

Ahhja

**albatros** · 10.09.2009 14:14

Das sollte auch kein Lösungsansatz sein. Der Autor der verlinkten Seite schreibt das doch auch selbst. Sollte nur heißen - Toyota!

Edit: also etwas für Leute, die den Nagel mit der Werkbank in die Wand hauen.

**dersu** · 10.09.2009 14:21

Zitat von dersu

ist aber ziemlich kompliziert

Sag ich doch.

**kardio** · 10.09.2009 14:45

Um es abzukürzen: Nimm besser eine Hintergrundgrafik mit 1px Breite z.B. so hier.

**Flave_** · 10.09.2009 15:37

alles klar!
vielen DANK

Thema: Hintergrundfarbe 2 farbig

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Hintergrundfarbe 2 farbig

Lesezeichen

Lesezeichen

Berechtigungen