Merius: unbeweglicher Hintergrund

Ich habe einen div Bereich, den ich für die News benutze. Insofern ist dieser Bereich auch scrollbar.
Als Hintergrund habe ich einen Stein, der sich beim scrollen nicht mitbewegen soll. Leider kriege ich das nicht hin :/

Die Definition des Bereiches (css) sieht zur Zeit so aus:

#box4 {
 background-image: url(../pictures/1280/Middle.jpg);
 background-repeat: no-repeat;
 position: absolute;
 overflow: auto;
 top: 150px;
 left: 150px;
 width: 650px;
 height: 80%;
 z-index: 2;
 font-family: 'Georgia';
 margin;
 margin-left: 50px;
}

  1. Aloha!

    Ich habe einen div Bereich, den ich für die News benutze. Insofern ist dieser Bereich auch scrollbar.
    Als Hintergrund habe ich einen Stein, der sich beim scrollen nicht mitbewegen soll. Leider kriege ich das nicht hin :/

    Dir hilft vermutlich background-attachment, eventuell in Verbindung mit background-position (findest Du auf der selben Seite).

    Viele Grüße vom Længlich

    1. Habes es mit IE 7.0 getestet.

      background-attachment:fixed;

      funktioniert, hat aber den unangenehmen Nebeneffekt, dass mein Bild jetzt nicht mehr da angezeigt wird wo ich es haben will(im div Bereich)
      Es sieht jetzt eher so aus, als ob es am linken oberen Rand beginnen würde, und sich somit ausserhalb meines div Bereiches befindet...

      1. Selamat pagi!

        funktioniert, hat aber den unangenehmen Nebeneffekt, dass mein Bild jetzt nicht mehr da angezeigt wird wo ich es haben will(im div Bereich)
        Es sieht jetzt eher so aus, als ob es am linken oberen Rand beginnen würde, und sich somit ausserhalb meines div Bereiches befindet...

        Genauso ist es, die Position bezieht sich jetzt auf den Viewport. Kannst Du es nicht mit background-position an die richtige Stelle schieben? Dein div ist doch sowieso fest positioniert, oder?

        Viele Grüße vom Længlich

      2. Habe es jetzt so geändert und es funktioniert:

        #box4 {
         background-image: url(../pictures/1280/Middle.jpg);
         background-repeat: no-repeat;
         position: absolute;
         overflow: auto;
         top: 150px;
         left: 150px;
         width: 650px;
         height: 80%;
         z-index: 2;
         font-family: 'Georgia';
         margin-left: 50px;
         background-attachment:fixed;
         background-position:150px 150px;
        }

        background-position:150px 150px; hat es richtig gerückt.

        Nur sonderbar, dass der div Bereich vollkommen ignoriert wird bei dieser Angabe... Vor allem befindet es sich mit den Parametern
        150px 15px nicht an der Stelle wo es sein soll. Es sind nur wenige px UNterschied, aber trotzdem....

        1. Habe es jetzt so geändert und es funktioniert:

          #box4 {
          background-image: url(../pictures/1280/Middle.jpg);
          background-repeat: no-repeat;
          position: absolute;
          overflow: auto;
          top: 150px;
          left: 150px;
          width: 650px;
          height: 80%;
          z-index: 2;
          font-family: 'Georgia';
          margin-left: 50px;
          background-attachment:fixed;
          background-position:150px 150px;
          }

          background-position:150px 150px; hat es richtig gerückt.

          Nur sonderbar, dass der div Bereich vollkommen ignoriert wird bei dieser Angabe... Vor allem befindet es sich mit den Parametern
          150px 15px nicht an der Stelle wo es sein soll. Es sind nur wenige px UNterschied, aber trotzdem....

          Habe das ganze jetzt auf dem IE6 getestet, da geht es so wieder nicht, Hintergrund zwar fix, aber der die background-position ist jetzt vom div abhängig und nicht vom gesamten Bild wie beim IE7.. Der Hintergrund ist jetzt zu weit weg.. seuftz.. Microsoft.....

          1. Hallo Merius,

            Habe das ganze jetzt auf dem IE6 getestet, da geht es so wieder nicht, Hintergrund zwar fix, aber der die background-position ist jetzt vom div abhängig und nicht vom gesamten Bild wie beim IE7..

            http://forum.de.selfhtml.org/archiv/2007/8/t157334/#m1024213
            sollte dein Problem lösen.

            HTH

            Jochen

            --
            Kritzeln statt texten:
            Scribbleboard
  2. Hallo,

    #box4 {
    background-image: url(../pictures/1280/Middle.jpg);
    background-repeat: no-repeat;
    position: absolute;
    overflow: auto;
    top: 150px;
    left: 150px;
    width: 650px;
    height: 80%;
    z-index: 2;
    font-family: 'Georgia';
    margin;
    margin-left: 50px;
    }

    hmmm, das sieht eigentlich alles OK aus. Mit welchem Browser hast dus getestet?
    MfG

    --
    SELF forever
    Mein Selfcode: ie:% br: fl:{ va:{ ls:& fo:| rl:( n4:( de:> ss:{ ch:? js:{ mo:| sh:( zu:{
    Mein Tipp: Opera verwenden, nicht den Bugbrowser(IE) oder FF!!
  3. Hello out there!

    Als Hintergrund habe ich einen Stein, der sich beim scrollen nicht mitbewegen soll.

    http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_attachment

    See ya up the road,
    Gunnar

    --
    „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)