Gibt es bei der Menge von Hintergrundgrafiken Einschränkungen?

[musikbaer]

Hallo,
ich versuche gerade vier Hintergrundgrafiken untereinander an zu ordnen doch leider geht es nur bis zur dritten Gafik, das vierte Bild wird nicht angezeigt, hat jemand einen Tipp für mich?

nav {
   width: 160px;
   height: 700px;
   background-image: url(../bilder/navlefttop.gif), url(../bilder/navleftstart.gif), url(../bilder/navleftmiddle.gif), url(../bilder/navleftend.gif);
   background-position: 0px top, 0px 53px, 0px 81px, 0px 520px;
   background-repeat: no-repeat, no-repeat, repeat-y, no-repeat;
   margin: 0;
   padding: 0;
}

Die Grafiken haben folgende Höhen 53, 28, 12 und 180px.
Wo ist mein Denkfehler oder sind vier Grafiken zu viel für CSS3?

Danke sagt der Musikbaer

 

[threadi]

Laut Spezifikation gibt es keine Einschränkung:
http://www.w3.org/TR/css3-background/#layering

Mir ist aber auch nicht bekannt, dass man mehr als 3 nutzen kann - hab ich selbst auch nie gemacht.

 

[MrMurphy]

Hallo,

bei mir werden vier Bilder angezeigt. Eigentlich. Das 4. Bild wird halt vom 3. überdeckt.

Nimm mal das "repeat-y" für das 3. Bild raus und ersetzte es durch "no-repeat". Dann solltest du alle 4 Bilder sehen.

Durch das "repeat-y" überdeckt das 3. Bild das 4. Bild.

Die zuerst im Quelltext aufgerufenen Bilder werden vor den folgenden gezeigt. Das kannst du auch nachvollziehen wenn du bei background-positon die 53px stufenweise verkleinerst. Dann rutscht das 2. Bild Stück für Stück hinter das 1. Bild.

Lösung:

Du gibst die Bilder in der Reihenfolge 53px, 28px, 180px und 12px an (tauscht also das 3. und vierte Bild bei background-image) und änderst folgende Eintragungen:

         background-position:
            0px top,
            0px 53px,
            0px bottom,
            0px 81px;
         background-repeat:
            no-repeat,
            no-repeat,
            no-repeat,
            repeat-y;

Bei mir werden dann alle 4 Bilder in der ursprünglichen Reichenfolge angezeigt,wobei das 3. Bild bis zum 4. Bild wiederholt wird. Dabei auf Komma und Semikolon achten.

Gruss

MrMurphy

 

[musikbaer]

Hallo MrMurphy,
danke habe aber einen anderen Weg gefunden und zwar in dem ich auf repeat verzichte und dafür background-size verwende.