WebWolf: Hintergrund in <div> mit scrollbar

nabend,

hab ein div-element, welches einen horizontalen scrollbalken hat (erreicht durch overflow:auto)

<div style="width:352px;height:255px;overflow:auto;background-image:url(bg.jpg);">

Der Hintergrund ist eine Art "Raster" an dem sich die Elemente, die sich in dem div befinden, richten sollen.

Hier mal ein Bild von der Box (div):

Wenn gescrollt wird, soll der Hintegrund mitlaufen, damit die Elemente in diesem Raster bleiben.

Problem: Funktioniert bei mir nur im InternetExplorer, aber nicht in Firefox.

background-attachment:scroll bewirkt da auch nichts (glaube das liegt daran, dass sich diese eigenschaft an dem Scrollen der kompletten Seite richtet).

Liegt das an der Formatierung des div-Elements oder geht das überhaupt garnicht?

hat jmd eine Idee?

  1. Hi,

    Wenn gescrollt wird, soll der Hintegrund mitlaufen, damit die Elemente in diesem Raster bleiben.

    Du meinst also eigentlich, er soll nicht mitlaufen (mit dem Inhalt des Elements, der wegscrollt), sondern stehen bleiben?

    Problem: Funktioniert bei mir nur im InternetExplorer, aber nicht in Firefox.

    Dann hast du vermutlich den Fehler begangen, dem IE zu sagen, er sollte es mit background-attachment:fixed darstellen?
    Ja, das macht der falsch, zumindest der 6er (ob der 7er immer noch, und wenn ja ob nur im Quirks Mode, weiss ich gerade nicht).

    background-attachment:scroll bewirkt da auch nichts (glaube das liegt daran, dass sich diese eigenschaft an dem Scrollen der kompletten Seite richtet).

    Sie besieht sich jeweils auf den containing block des Elements.
    http://de.selfhtml.org/css/eigenschaften/anzeige/background_attachment.htm verhaelt sich bei mir im Firefox beim obigen Beispiel wie gewuenscht, wenn ich dem Element des ersten Beispiels noch eine feste Hoehe und overflow gebe.
    Und scroll ist btw. der Defaultwert.

    MfG ChrisB

    --
    „This is the author's opinion, not necessarily that of Starbucks.“
    1. Du meinst also eigentlich, er soll nicht mitlaufen (mit dem Inhalt des Elements, der wegscrollt), sondern stehen bleiben?

      Der Hintegrund soll mit den Elementem im div mitlaufen (als ob die Elemente mit dem Hintergrund fest verankert sind)

      Dann hast du vermutlich den Fehler begangen, dem IE zu sagen, er sollte es mit background-attachment:fixed darstellen?

      background-attachment:fixed habe ich nirgendswo verwendet, da sich das Bild ja mitbewegen soll =)

      »» background-attachment:scroll bewirkt da auch nichts (glaube das liegt daran, dass sich diese eigenschaft an dem Scrollen der kompletten Seite richtet).

      Sie besieht sich jeweils auf den containing block des Elements.

      Danke für die Information

      Und scroll ist btw. der Defaultwert.

      Das weiß ich bereits ... und eben dieser Effekt ist gewollt, tritt aber nicht ein (Firefox)

      greez. webwolf

      1. Hi,

        Du meinst also eigentlich, er soll nicht mitlaufen (mit dem Inhalt des Elements, der wegscrollt), sondern stehen bleiben?
        Der Hintegrund soll mit den Elementem im div mitlaufen

        Istdenndassoschwer ...

        Wenn du overflow:auto bei ueberlangem Inhalt verwendest - dann scrollen eben diese Inhalts-Elemente innerhalb des Divs, waehrend du den Hintergrund gerne *nicht* scrollend, sondern stehenbleibend haettest.

        Das weiß ich bereits ... und eben dieser Effekt ist gewollt, tritt aber nicht ein (Firefox)

        Kann ich nicht nachvollziehen.

        MfG ChrisB

        --
        „This is the author's opinion, not necessarily that of Starbucks.“
        1. Wenn du overflow:auto bei ueberlangem Inhalt verwendest - dann scrollen eben diese Inhalts-Elemente innerhalb des Divs, waehrend du den Hintergrund gerne *nicht* scrollend, sondern stehenbleibend haettest.

          Der Hintergrund *soll* scrollen ^^
          Genau das ist das Problem ... er tut es nicht!

          Vielleicht reden wir auch aneinander vorbei. =O

          Man stelle sich vor, Die Elemente (waffen etc.) und der Hintergrund (raster) wären EIN gemeinsames bild, das sich beim scrollen bewegen soll

          1. Hi,

            Vielleicht reden wir auch aneinander vorbei. =O

            Ah jetzt ... ja.

            Man stelle sich vor, Die Elemente (waffen etc.) und der Hintergrund (raster) wären EIN gemeinsames bild, das sich beim scrollen bewegen soll

            Dann verpasse es einem Element als Hintergrundbild, welches sich *in* dem Container befindet, und damit selber auch mit scrollt - mit background-repeat:repeat-y.

            MfG ChrisB

            --
            „This is the author's opinion, not necessarily that of Starbucks.“
            1. Dann verpasse es einem Element als Hintergrundbild, welches sich *in* dem Container befindet, und damit selber auch mit scrollt - mit background-repeat:repeat-y.

              JA ! ^^
              so war das gemeint. DANKE

              Die Sache hat nur einen kleinen Haken:

              (Das zu erkälren hätte ewig gedauert)

              http://91.97.179.227/index.html

              Fall 1: Hintergrund wunderschön abgedeckt aber leider zu lang.
              Fall 2: Hintergrund zu kurz.

              Kann man da was machen?

              1. Hi,

                http://91.97.179.227/index.html

                Fall 1: Hintergrund wunderschön abgedeckt aber leider zu lang.
                Fall 2: Hintergrund zu kurz.

                Kann man da was machen?

                Ja - dem innen liegenden Div keine feste Hoehe geben.

                Da die Nachfahrenelemente, per float aus dem Fluss genommen, ihm so keine Hoehe mehr geben - entweder das Div selber ebenfalls floaten, oder ihm overflow:auto verpassen.

                MfG ChrisB

                --
                „This is the author's opinion, not necessarily that of Starbucks.“
                1. em innen liegenden Div keine feste Hoehe geben.

                  Da die Nachfahrenelemente, per float aus dem Fluss genommen, ihm so keine Hoehe mehr geben - entweder das Div selber ebenfalls floaten, oder ihm overflow:auto verpassen.

                  Wahnsinn!
                  Es funktioniert!

                  Vielen Dank ^^