Hallo Forum,
wer kann mir sagen, wie ich einen Text über ein Bild lege?

Ich biete auf meiner Homepage waren an und möchte bei Bedarf den Text "ausverkauft" über das Bild der Ware schreiben. Der Text müsste also in der Ebene vor dem Bild sein.

Danke für Eure Hilfe.

Das geht mit einem Grafikprogramm. Microsoft hat in diese Richtung kräftig nachgelegt. Das ursprüngliche paint, was in jedem Betriebssystem enthalten ist, wurde verbessert und das schöne, es ist kostenlos.

Paint.NET, kostenlose, verbesserte MS Paint-Version, als Alternative zu teuren Bildbearbeitungs-Programmen.
http://www.chip.de/downloads/c1_downloads_13015268.html

Alternativ dazu wiederrum, kann man auch bei HTML und CSS bleiben.
Schau dir mal die möglichkeiten an die dir ein "z-index" dietet - http://www.css4you.de/z-index.html
In Verbindung mit ein paar "div's" und einer transparenten Grafik auf der "Ausverkauft" steht liese sich da schon was machen. Zusätzlich sparst du webspace, weil du die Artikel bilder nicht alle doppelt haben musst und die Seite wird später auch etwas schneller gelade weill für die z.B. fünf ausverkauften Artikel nur EIN Bild nachgeladen werden muss (das tranzparente mit Text) und nicht die fünf Artikelbilder auf denen nun "Ausverkauft" steht. Das wiederum spart auch Trafik !

Code: Alles auswählen

<div style="position:relative;">
    <div style="position;absolute; top:0px; left:0px; z-index:1;">
        <img src="artikel.jpeg" alt="Kugelschreiber">
    </div>
    <div style="position;absolute; top:0px; left:0px; z-index:2;">
        <img src="na.jpeg" alt="Ausverkauft">
    </div>
</div>

So ungefähr ! Keine Ahnung ob obiger Code funktioniert, aber dessen Aufgabe soll seien:
Die beiden Container mit den Bildern werden in dem Eltern-Div an der selben Stelle positioniert (oben-links)(top:0px; left:0px;) und durch den z-index wird die überlappung bestimmt. In unserem fall, Artikelbild nach unten und Ausverkauftbild nach oben bzw. da drüber.

MfG
Dragonl

Hallo,

ich hab eine andere Idee, es ist so vielleicht verwaltungstechnisch einfache zu verwirklichen.

Erstelle eine Tabelle. Als Hintergrund gibst du das gewünschte Bild an.
Wenn das Bild ausverkauft ist, lässt du innerhalb der Tabelle den Text "Ausverkauft" einblenden. Der Text wird das Bild nicht vollständig verdecken und du hast nicht den Aufwand, jede Grafik bearbeiten zu müssen.

Und jetzt die Bastelanleitung:

Bild ist verfügbar:

Code: Alles auswählen

<table style="background-image:url(grafik.jpg); background-repeat:no-repeat">
<tr><td>
<p><!-- --></p>
</td></tr>
</table>

Bild wurde bereits verkauft:

Code: Alles auswählen

<table style="background-image:url(grafik.jpg); background-repeat:no-repeat">
<tr><td>
<p><i>Ausverkauft</i></p>
</td></tr>
</table>