Transparantes Bild über Text legen

Computer: Software & Programmierung HTML & CSS
#1

Hallo zusammen,
ich habe ein Problem, das augenscheinlich leicht zu lösen ist. Ich verzweifel aber daran. Ich habe in Joomla einen Artikel mit Text und drei Bildern. Über das letzte Bild möchte ich einen Schriftzug „verkauft“ mit einem transparenten Bild (png) legen.

Das geht normalerweise mit „position:absolute“. Mein Problem, die ersten beiden Bilder werden auf einem Computer nebeneinander angezeigt, bei einem Smartphone untereinander. Der Schriftzug verschiebt sich damit an die falsche Stelle.

Mit „position:relative“ bekomme ich das zwar hin, es entsteht aber ein freier Platz im Text, der so groß ist, wie das png.

Anzuschauen geht das hier. Wer weiß Rat?
Es soll so aussehen wie jetzt, nur ohne den großen Abstand.

Gruß
Bernd

#2

Hallo Bernd,

position:absolute ist da meiner Meinung nach richtig. Hast du den Bereich, über den du das Bild legen möchtest, zusammen mit dem Bild selbst in ein gemeinsames Div gelegt?

position:absolute sollte sich am nächsthöheren Element (eben z. B. einem übergeordneten Div) orientieren und damit sollte es klappen.

Siehe z. B.
http://de.selfhtml.org/css/eigenschaften/positionier…

Viele Grüße
A.

#3

Hallo Bernd,

muss es unbedingt mit CSS sein, oder reicht auch Bildbearbeitung?
Denn so etwas:

Über das letzte Bild möchte ich einen Schriftzug „verkauft“ mit einem
transparenten Bild (png) legen.

würde ich ganz pragmatisch direkt im Bild machen und das geänderte Bild hochladen/einbinden.

Auf der anderen Seite, wenn ich mir das so anschaue: wenn das Vieh verkauft ist, was spricht dagegen, den ganzen Text samt Bild rauszunehmen? Wenn’s verkauft ist, steht es ja nicht mehr zur Verfügung.

Viele Grüße
Christa

#4

Hallo Christa,
vielen Dank für deine Antwort. Ich wollte auch gerne, dass das „verkauft“ in den dazugehörigen Text mit hineinragt. Sonst wäre das eine gute Idee.
Die Anzeigen deaktivieren sich nach einige Zeit von alleine. Ich dachte aber das „verkauft“ kurze Zeit mit anzeigen zu lassen, um zu zeigen, dass die Anzeigen auch funktionieren und die Tiere verkauft werden.  :wink:

Gruß Bernd

#5

Hallo Anja,
ja habe ich. Wenn ich keinen Fehler gemacht habe, hatte ich div in div. Aber trotzdem hat sich das noch an dem Element über dem ersten div ausgerichtet.
Keine Ahnung, warum.

Gruß Bernd

#6

Hallo Bernd,

ja habe ich. Wenn ich keinen Fehler gemacht habe, hatte ich
div in div. Aber trotzdem hat sich das noch an dem Element
über dem ersten div ausgerichtet.

momentan hast du aber ein div mit deiner Grafik, und darunter einfach in mehreren Absätzen, ohne div, den Text und das Bild. Pack doch mal die anderen Absätze mit in den div-Bereich hinein (oder den div-Bereich der Grafik und die anderen Absätze insgesamt in einen weiteren div-Bereich) und versuch’s dann nochmal, damit wir sehen, wie es dann konkret aussieht. :smile:

Viele Grüße
Christa

#7

Ahoi Bernd,

Über das letzte Bild möchte ich einen Schriftzug „verkauft“ mit einem transparenten Bild (png) legen.

Es gab zwar schon einige Antworten und die Frage liegt auch schon 'n bissl zurück, aber evtl. ist folgender Vorschlag das, was du suchst:

Wenn du die Dateinamen und Abmessungen anpasst, sollte das den gewünschten Effekt haben.

Das eigentliche Bild ist dabei der Hintergrund des DIV, während innerhalb des DIV ein Bild als Overlay eingebaut ist…

P.S.: Achte am besten darauf, dass die Abmessungen mögtlichst genau stimmen, da zumindest ohne weitere Angaben das Hintergrundbild wiederholt wird…

#8

Und für den Fall, dass mein kurzes Beispiel nicht ausreichend sein sollte, hab ich hier noch 'n weiteres vorbereitet: https://drive.google.com/file/d/0B_Q7F53IGtyDOEg5Zlk…