[CSS/HTML] Hintergrund vor Vordergrund?

[alcaeus]

Ja, ich weiß es klingt lustig, aber es gibt eine Erklärung dafür
Ich baue zur Zeit ein Template fürs phpBB. Dabei soll das Banner der Seite in einen "Rahmen" eingebaut werden. Dieser Rahmen setzt sich an der linken Seite wie folgt zusammen:

Code:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td style="background:url(top1.gif);"></td>
    <td style="background:url(top2.gif);"></td>
  </tr>
  <tr>
    <td style="background:url(middle1.gif);"></td>
    <td style="background:url(middle2.gif);">[img]banner.jpg[/img]</td>
  </tr>
  <tr>
    <td style="background:url(bottom1.gif);"></td>
    <td style="background:url(bottom2.gif);"></td>
  </tr>
</table>

In der zweiten Zelle von Zeile 2 sollte der Hintergrund allerdings vor das Banner, und nicht dahinter. Der Hintergrund hat nämlich abgerundete Ecken, und die sollten das Banner eben verdecken.
Weiß jemand ob (und wie) ich das lösen könnte? Ich möchte nämlich verhindern, dass man das Banner an das Template anpassen muss.

Greetz
alcaeus

[Meflin]

hi andreas,
ganz einfach: mach in der zweiten zeile nur eine spalte, füge den rahmen als bild ein und den banner via css als hintergrundbild!

*MFG*

[alcaeus]

Hallo Meflin,

Zitat von Meflin:

füge den rahmen als bild ein

und wie genau füge ich ein Bild als Rahmen ein?

Zitat von Meflin:

und den banner via css als hintergrundbild!

Den Banner als Hintergrund geht nicht, da das Banner evtl. verlinkt werden soll...

Greetz
alcaeus

[Neuni]

Kann man da nicht z-index nehmen? Also mit

Code:

style="z-index: 1"

Kann man angeben wie hoch auf dem Bildschirm das Bild liegen soll. Ich glaube je höher die Zahl um so weiter oben ist es...denke mal das könnte hier auch gehen, oder?

[mh166]

Was mir noch einfällt, wäre evtl. mit Layern zu arbeiten. Damit kannste glaub ich auch die Reihenfolge festlegen. Allerdings hab ich das noch nie gemacht, sondern nur davon gehört. Such einfach mal nach CSS Layer.

mfg, mh166

//Edit: Ich sehe gerade, das is mir wohl jemand zuvor gekommen. Naja, das is aber das, was ich meine.

[alcaeus]

Hallo Neuni,

Zitat von Neuni:

Kann man da nicht z-index nehmen? Also mit

Code:

style="z-index: 1"

Kann man angeben wie hoch auf dem Bildschirm das Bild liegen soll. Ich glaube je höher die Zahl um so weiter oben ist es...denke mal das könnte hier auch gehen, oder?

also ich hab jetzt folgendes:

Code:

<td>[img]bild1.gif[/img][img]bild2.gif[/img]</td>

Die Bilder liegen nun schön übereinander, aber leider wird bild2 nicht wie gewollt von bild1 überdeckt, auch nicht wenn ich den z-index umdrehe.
Weiters, wenn ich "position:absolute" verwende, dann werden die Bilder nicht an der Tabellenzelle ausgerichtet, sondern am body. Kann ich irgendwie angeben woran das ausgerichtet werden soll? (ich hätte da nämlich noch gern ein drittes Bild rechtsbündig, aber die Breite der Zelle ist variabel)

@mh166: Danke für den Tipp, aber Layers funktionieren nicht, da die Bilder teilweise transparent sind (oder funktioniert das trotzdem? )

Greetz
alcaeus

[Gina]

Hi,

ich hab das grad mal nachvollzogen...

Bild1 ist das Hintergrundbild und Bild2 ist das Vordergrundbild. Transparenz funktioniert. Wenn du sie ausrichten willst, dann mach sie doch gleich groß und den überlappenden Teil transparent. Dann bist du flexibel...

Gina.

PS: Vielleicht hängst du einfach mal deine beiden bzw drei Bilder an?

[alcaeus]

Hallo Gina,

die Bilder kann ich leider nicht anhängen, ich hab alles auf dem Laptop und bin nur Gast hier auf diesem PC.
Nochmal zur Erklärung:

• bild1.gif ist ein halbtransparentes gif, welches die linke obere Ecke verdeckt.
• bild2.gif ist ein Banner, welches evtl. auch mit einem Link versehen wird. Das Banner soll z.T. von bild1.gif überdeckt werden, und an der gleichen Position wie bild1.gif beginnen (deshalb auch "left:-93px")

Damit sollten die Anforderungen etwas klarer sein. Theoretisch (und praktisch auch, siehe SelfHTML) sollte dies mit z-index lösbar sein. So wie ich es oben geschrieben habe, landet bild1.gif aber immer unter bild2.gif, egal wie ich z-index einstelle. Irgendwie scheint das nicht so ganz zu funktionieren.

Greetz
alcaeus

[Meflin]

hi alcaeus, u meiner methode mit dem banner als hintergrundbild: das geht schon, lege einfach ein blindgif darüber und verlinke dieses, dann hast du immernoch den gewünschten effekt.

[alcaeus]

Hallo Meflin,

Zitat von Meflin:

hi alcaeus, u meiner methode mit dem banner als hintergrundbild: das geht schon, lege einfach ein blindgif darüber und verlinke dieses, dann hast du immernoch den gewünschten effekt.

naja, aber ob man dies einem 0815-phpBB-Nutzer zutrauen kann? Das Ziel wäre ja, dass ich einfach sage, wo der eigene Bildpfad fürs Banner einzutragen ist, und das wars. Ich will den Leuten nicht zutrauen, die Größenangaben fürs blindgif einzutragen oder gar das blindgif zu erstellen

Greetz
alcaeus