Bild mit anderem Bild überlagern

[Ralf]

Hallo!

Ich habe eine Grafik (nicht transparent) in einer Tabellenzelle und möchte diese mit einer anderen (kleineren) Grafik (transparent) mittig überlagern).

Um das mittig hinzubekommen, habe ich mir überlegt, die Grafik als Hintergrund mit no-repeat und center zu definieren. Aber es ist mir nicht gelungen (auch nicht mit position und z-index), diese dann vor die andere Grafik zu bekommen.

Hat jemand eine Idee?

Ausgangsposition ist folgendes Konstrukt:

  
<td>  
  <img src=...>  
</td>  

Ralf

[Seyrano]

hallo :)

Lege das zweite Bild mal in eine DIV Ebene und leg die dann per z-index über das andere...

gruß
tobi

[Ralf]

Hallo,

Lege das zweite Bild mal in eine DIV Ebene und leg die dann per z-index über das andere...

Hab ich schon versucht. Geht aber nur mit absoluter Positionierung. Klappt im IE auch recht gut, weil der dann die Größe des Elternelements als Ausgangsbasis nimmt. Der FF bezieht es aber auf die ganze Seite.

Ralf

[Detlef G.]

Hallo Seyrano

Lege das zweite Bild mal in eine DIV Ebene und leg die dann per z-index über das andere...

Wozu soll das div gut sein?
Alle Eigenschaften, die du dem div geben könntest, kannst du auch direkt dem img zuweisen.

Auf Wiederlesen
Detlef

[Rafael]

Das td muss in jedem Fall die hintergründige Grafik enthalten. Das img-Tag sollte dann per margin: auto; ausgerichtet werden und die mittige Grafik enthalten. Du kannst per z-index ja nicht ein Kindelement vor das Elternelement stellen.

Auch insgesamt klingt mir das nach einem komischen Konstrukt.

Grüße.

[Ralf]

Das td muss in jedem Fall die hintergründige Grafik enthalten. Das img-Tag sollte dann per margin: auto; ausgerichtet werden und die mittige Grafik enthalten. Du kannst per z-index ja nicht ein Kindelement vor das Elternelement stellen.

Wie schon im vorigen Posting erwähnt, habe ich als Hintergrund das Problem mit der Größe des TD. Da bringt mir dann auch margin:auto; nichts. Zudem müsste das beim IE6 angepasst werden.

Auch insgesamt klingt mir das nach einem komischen Konstrukt.

Ist halt dadurch bedingt, dass die Ausgangsseite generiert vorliegt und per Javascript umgesetzt werden soll.

Ralf

[rfb]

Moin

Um das mittig hinzubekommen, habe ich mir überlegt, die Grafik als Hintergrund mit no-repeat und center zu definieren. Aber es ist mir nicht gelungen (auch nicht mit position und z-index), diese dann vor die andere Grafik zu bekommen.

Hat jemand eine Idee?

das Konzept ist absurd!

Kurze Überlegung:
Eine Grafik soll in den Hintergrund, die andere davor.
Schlussfolgerung: erstere als HG-Bild, die andere per img-Tag einbinden.

Wieso hast du genau das Gegenteil gemacht?

Gruß
rfb

[Ralf]

Hallo,

das Konzept ist absurd!

Es basiert auf der Ausgangslage einer generierten Seite.

Kurze Überlegung:
Eine Grafik soll in den Hintergrund, die andere davor.
Schlussfolgerung: erstere als HG-Bild, die andere per img-Tag einbinden.

Das könnte ich zwar per Javascript umsetzen, aber dann hätte ich das Problem, dass die Zelle nicht mehr durch die Größe der ersten Grafik bestimmt wäre.

Wieso hast du genau das Gegenteil gemacht?

Weil ich nach einer möglichst einfachen Lösung suche.

Ralf

[rfb]

Moin

Das könnte ich zwar per Javascript umsetzen, aber dann hätte ich das Problem, dass die Zelle nicht mehr durch die Größe der ersten Grafik bestimmt wäre.

Was hat JavaScript hiermit zu tun? Bislang dreht es sich allein um CSS!
Um einem Element eine bestimmte Größe zu geben gibts die CSS-Eigenschaften width und height.

Gruß
rfb

[Ralf]

Was hat JavaScript hiermit zu tun? Bislang dreht es sich allein um CSS!

Stimmt - dass hatte ich im Eingangsposting nicht erwähnt. Die Augangslage ist als fix anzusehen und muss nachträglich auf das gewünschte Ziel hin bearbeitet werden. Dafür wird Javascript benötigt.

Um einem Element eine bestimmte Größe zu geben gibts die CSS-Eigenschaften width und height.

Sicherlich. Nur bringt das in diesem Fall nichts, weil die Größe des TD hier durch das IMG bestimmt wird.

Ich hatte gehofft, dass es unter diesen Voraussetzungen eine möglichst einfache Lösung per CSS gibt. Natürlich kann ich per Javascript die Größe ermitteln und dann die transparente Grafik entsprechend positionieren.

Ralf

[Ralf]

Ausgangsposition ist folgendes Konstrukt:

<td>
  <img src=...>
</td>

  
Zwar keine Lösung des ursprünglichen Problems (gibt es eine?), aber für mich durchaus ausreichend, weil es optisch zufriedenstellend ist, das überlagernde Bild an einer festen Position anzeigen zu lassen:  
  
~~~html
  
<td style="position:relative;">  
  <img style="position:absolute; margin:5px;" src=...>  
  <img src=...>  
</td>  

Ralf