Shayanne: Streifenbildung im Hintergrundbild bei repeat-x

Hallo zusammen,

ich möchte im body ein Hintergrundbild mit Farbverlauf einbinden. Ich habe eine entsprechende Datei mit CorelDraw X3 und alternativ mit Microsoft Photo Draw erstellt und ich den Formaten jpg, png und gif abgespeichert. Egal welches Dateiformat ich nehme oder wie breit ich die Grafik mache, es entstehen immer Streifen zwischen den sich wiederholenden Bildern.
Wer weiß Rat?

body  {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
  color: #000;
  background: url(../images/bg.png) repeat-x      }

Viele Grüße
Karin

  1. ich möchte im body ein Hintergrundbild mit Farbverlauf einbinden. Ich habe eine entsprechende Datei mit CorelDraw X3 und alternativ mit Microsoft Photo Draw erstellt und ich den Formaten jpg, png und gif abgespeichert. Egal welches Dateiformat ich nehme oder wie breit ich die Grafik mache, es entstehen immer Streifen zwischen den sich wiederholenden Bildern.

    ohne das bild zu sehen nicht

    vermutlich liegt es aber daran, dass der farbverlauf nicht exakt von oben nach unten verläuft sondern leicht schief oder dass der verlauf nicht linear ist sondern mittels dithering erzeugt wird, um die linienbildung zu vermeiden

    wenn du also einen 1px breiten streifen aus einem farbverlauf nimmst und diesen wiederholst, sieht das nicht so aus wie wenn du sagen wir 100 pixel nimmst du wiederholst

    1. ich möchte im body ein Hintergrundbild mit Farbverlauf einbinden. Ich habe eine entsprechende Datei mit CorelDraw X3 und alternativ mit Microsoft Photo Draw erstellt und ich den Formaten jpg, png und gif abgespeichert. Egal welches Dateiformat ich nehme oder wie breit ich die Grafik mache, es entstehen immer Streifen zwischen den sich wiederholenden Bildern.

      »»
      das problem ist das bild ..

      ich gehe mal davon aus, dass du einen umriss um das eigentliche bild im selben farbverlauf gelegt hast .. wenn ja versuche mal folgendes

      mache deinen verlauf im corel-draw sagen wir mal 50 px breit
      diesen ziehst du dann über drag&drop rüber in corel photopaint ohne es umzuwandeln
      dann schneidest du den verlauf mittig auf 10px breite und deine gewünschte länge aus und speicherst es weboptimiert als jpg ..

      jetzt sollte der streifen beim repeat verschwunden sein ..

      best regards

      dog

      1. dann schneidest du den verlauf mittig auf 10px breite und deine gewünschte länge aus und speicherst es weboptimiert als jpg ..

        einen verlauf simplen verlauf weboptimiert als jpg speichern? für solche dinge ist in fast 100% der fälle png besser geeignet, die unwesentlich größere datei dürfte bei der farbtreue fürsich sprechen

        1. Vielen Dank für die Tipps! Das mit Drag&Drop in Corel Photo Paint funktioniert! Obwohl ich bei meinen Versuchen vorher auch keinen Umriss gemacht hatte ....

          Wie auch immer, Hauptsache es passt jetzt - ich war schon kurz vor'm Verzweifeln! :-)

          Schönes Wochenende noch!
          Karin

  2. Hallo Karin,

    ich möchte im body ein Hintergrundbild mit Farbverlauf einbinden. [...]Egal welches Dateiformat ich nehme oder wie breit ich die Grafik mache, es entstehen immer Streifen zwischen den sich wiederholenden Bildern.

    es liegt am Bild selbst. Du meinst doch body-bg.png, oder? Das Bild hat eine Breite von 2px und eine Höhe von 1000px. Die linke Pixelspalte stellt von oben nach unten einen Farbverlauf von ganz dunkelrot über irgendein Braun bis nach grau dar, die rechte Pixelspalte verläuft von einem ziemlich klaren Rot nach Dunkelgrau. Das *muss* ja Streifen geben!

    Noch dazu hat das Bild ganz am oberen Rand *ein* dunkelgraues und *ein* hellgraues Pixel.

    Der Unfall passiert also nicht bei der Einbindung des Bildes oder beim Erstellen irgendeines CSS-Codes, sondern schon beim Erzeugen des Bildes.

    So long,
     Martin

    --
    F: Was ist schneller: Das Licht oder der Schall?
    A: Offensichtlich der Schall. Wenn man den Fernseher einschaltet, kommt immer erst der Ton, und dann erst das Bild.
    1. Hallo.

      Der Unfall passiert also nicht bei der Einbindung des Bildes oder beim Erstellen irgendeines CSS-Codes, sondern schon beim Erzeugen des Bildes.

      Um genau zu sein: Der Unfall passiert bei der Umwandlung von Vektorgrafik in Pixelgrafik, weil die Breite der Vektorgrafik nicht genau zwei px entspricht und bei der Umwandlung die weiße Umgebung in die Pixel mit einbezogen wird, um die zweite Pixelspalte zu füllen.
      Die sinnvolle Vorgehensweise ist also folgende: Man legt die Vektorgrafik mit einem sogenannten Beschnitt an, indem mein einen Hintergrund oder das Objekt selbst minimal vergrößert, ein transparentes Objekt in den beschnittlosen Maßen auf die Grafik positioniert und dieses transparente Objekt anschließend als Pixelgrafik exportiert.
      MfG, at