m4zl: CSS Hintergrundbild am Seitenrand

Hallo, ich habe folgendes Problem:
Auf einer Seite möchte ich am linken Rand eine Art farblichen Übergang erstellen, der beispielsweise von weiß nach schwarz verlaufen kann.
Dazu habe ich im Body mittels margin-left dort etwas platz gelassen. Nun möchte ich dort ein Bild (1px hoch, 100px breit) einfügen, das also mittels Widerholung den gesamten Rand von oben bis unten einnehmen soll.

Ich weiß bloß nicht, wie ich das Bild nur in diesen Randbereich, welcher 100px breit ist einfügen soll, da "body-background" das Bild ja über die gesamte Seite verteilen würde.

  1. Liebe(r) m4zl,

    Du kannst <http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position@title=zu einem Hintergrundbild auch Koordinaten angeben>. Wenn Du es in y-Richtung wiederholen lässt, dann erübrigt sich dabei natürlich die y-Koordinate...

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. Nunja, mein Problem liegt eher darin, dass ich das Bild gar nicht erst an den linken Rand bekomme.
      Meine Seite ist im Prinzip schon fast fertig aufgebaut und ich wollte im Nachhinein diesen Rand einfügen. Darum habe ich also wie gesagt im CSS Dokument beim Body margin-left:100px angegeben. Jetzt hat der Gesamte Seitenaufbau einen Abstand zum linken Rand aber in diese Lücke selbst bekomme ich scheinbar nichts mehr hinein.
      Ein neuer Div Block wird ja auch erst nach 100px angesetzt.
      Die Lösung müsste eigentlich relativ unkompliziert sein. Es handelt sich um ein Unterrichtsprojekt und wenn ich mich nicht sehr täusche, dann wurde dort kurz erwähnt, dass es etwas mit dem margin Befehl zu tun hat... so als könnte ich jetzt irgendwie sagen, dass es ein Background-Image gibt aber eben nur für diesen bestimmten Bereich.

      Danke schonmal für die Hilfe

      1. Hallo m4zl,

        Meine Seite ist im Prinzip schon fast fertig aufgebaut und ich wollte im Nachhinein diesen Rand einfügen. Darum habe ich also wie gesagt im CSS Dokument beim Body margin-left:100px angegeben. Jetzt hat der Gesamte Seitenaufbau einen Abstand zum linken Rand aber in diese Lücke selbst bekomme ich scheinbar nichts mehr hinein.

        Wie wäre es denn, wenn du statt margin-left:100px mal padding-left:100px setztest und dann, wie Felix es bereits vorgeschlagen hat, das vertikal wiederholte Hintergrundbild dem BODY-Element zuwiesest?

        Gruß Gernot

        PS: Ich würde Felix nicht vorgreifen, wenn ich mir nicht unsicher wäre, ob er nicht möglicherweise ein Mensch mit geordneterem Tagesablauf als ich selbst und deshalb schon in Morpheus' Armen läge.
        ;-)

      2. Hallo,

        Nunja, mein Problem liegt eher darin, dass ich das Bild gar nicht erst an den linken Rand bekomme.
        [...] beim Body margin-left:100px angegeben.

        und warum weist du dieses Hintergrundbild dann nicht dem html-Element zu?

        So long,
         Martin

        --
        Letztlich basiert alles auf dem Feuer, dem Rad, der Eins und der Null.
          (Gernot Back)
  2. Hallo, ich habe folgendes Problem:
    Auf einer Seite möchte ich am linken Rand eine Art farblichen Übergang erstellen, der beispielsweise von weiß nach schwarz verlaufen kann.
    Dazu habe ich im Body mittels margin-left dort etwas platz gelassen. Nun möchte ich dort ein Bild (1px hoch, 100px breit) einfügen, das also mittels Widerholung den gesamten Rand von oben bis unten einnehmen soll.

    Ich weiß bloß nicht, wie ich das Bild nur in diesen Randbereich, welcher 100px breit ist einfügen soll, da "body-background" das Bild ja über die gesamte Seite verteilen würde.

    Hi,

    mir fällt spontan nur folgende Möglichkeit ein:

    Erstelle einen DIV-Container, positioniere ihn absolut oben links in der Ecke, gib ihm eine Breite von 100px und eine Höhe von 100% und stelle mittels CSS als Hintergrundbild dein Verlaufsbild ein!

    MfG,

    McKinsey

    1. Hallo McKinsey,

      mir fällt spontan nur folgende Möglichkeit ein:

      Erstelle einen DIV-Container, positioniere ihn absolut oben links in der Ecke, gib ihm eine Breite von 100px und eine Höhe von 100% und stelle mittels CSS als Hintergrundbild dein Verlaufsbild ein!

      100% Höhe wovon? Was passiert denn, wenn es im Browserfenster mehr Inhalt gibt, als auf 100% desselben Platz hat und man scrollen muss? Da hört der Verlauf dann wohl auf! Ob das aber im Sinne des/der OP ist?

      Gruß Gernot