Folgendes: Ich möchte einem <div> abgerundete Ecken verpassen. Dies realisiere ich mit halb-transparenten png's in den Ecken (vier verschachtelte divs mit jeweils einem ecken-png). Das klappt soweit ganz gut, solange ich nur mit Farben und text arbeite (in der untersten <div>). Sobald ich ein Bild einfügen will, setzt sich dieses immer über die Eck-Grafiken, was das ganze natürlich nutzlos macht.
Also setze ich einen z-index wert. Doch obwohl die Eck-Grafiken einen niedrigeren z-index wert haben als das Bild, sind sie hinter- anstatt vor dem Bild.

Hier mal der Code:
Quellcode:<style type="text/css">

.tl {
    background:url(img/mask_tl.png) top left no-repeat; z-index:100;
    
    }

.tr {
    background:url(img/mask_tr.png) top right no-repeat; z-index:101;
    
    }

.bl {
    background:url(img/mask_bl.png) bottom left no-repeat; z-index:102;
    
    }

.br {
    background:url(img/mask_br.png) bottom right no-repeat; z-index:103;
    
    }

.back {
    z-index:200;
}
</style> und:

Quellcode:<div style="width:900px; height:auto;">
    <div class="tl">
    <div class="tr">
    <div class="bl">
    <div class="br">
        <div class="back"><img src="img/slide-1.png" /></div>
    </div>
    </div>
    </div>
    </div>
</div>
Hat jemand eine Ahnung warum das nicht so läuft wie ich mir das wünsche?

Danke und Gruss
Maurus

Interstellar - visual love

I'm not random, i just have many thoug... Oh look, a Squirrel!

Zusatz: Das funktioniert auch nicht wenn ich dem Content-Div kein Bild, sondern eine Farbe zuweise. Die eck-png's befinden sich immer hinter der div.

Interstellar - visual love

I'm not random, i just have many thoug... Oh look, a Squirrel!

Natürlich muss ich mich zuerst x-Stunden damit rum schlagen bevor ich mich ans Forum wende. Kaum danach fällt mir die Lösung dann selbst ein:

Das Problem war das hier:
Quellcode:background:url(img/mask_tl.png) top left no-repeat; Die Positionierung und das Repetieren muss separat ausgeschrieben werden. So:
Quellcode:.tl
    {
        background-image:url(../img/corner_tl.png);
        background-repeat:no-repeat;
        background-position:top left;
        padding:0;
        margin:0;
    } So funktioniert das.

Interstellar - visual love

I'm not random, i just have many thoug... Oh look, a Squirrel!

Mach’s mit CSS3:
Quellcode:border-radius
http://dimox.net/cross-browser-border-radius-rounded-corners/

Macht IE nicht mit.

€dit: http://www.youtube.com/watch?v=hpLJqLhzzLk

Interstellar - visual love

I'm not random, i just have many thoug... Oh look, a Squirrel!

Auch nicht mit der border-radius.htc Datei?

Hab mir das mal kurz angeschaut. Sieht soweit ganz interessant aus und macht das ganze etwas einfacher. Wie sehr kann man auf dessen Funktionalität vertrauen?

Interstellar - visual love

I'm not random, i just have many thoug... Oh look, a Squirrel!

Bisher noch nie Probleme mit gehabt. Allerdings testen wir nur noch im IE > 7 und auch der fällt wohl bald weg. ;)

Download: http://code.google.com/p/curved-corner/downloads/detail?name=border-radius.htc

Ich dacht je höher der z-index, desto weiter oben das Element? ergo funktioniert doch alles richtig. Du müsstest einfach den z-index von dem Bild kleiner haben als die Eck-Bilder, odr?
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index