Text über GIF schreiben

Nuveon

Neues Mitglied
Liebe Mitglieder:innen,

ich habe das Problem, dass ich meine Divbox (bestehend aus einem h2 und p tag) nicht in meiner GIF Datei einfügen kann bzw. Texte in dem GIF Areal zu schreiben.
Im Anhang habe ich einen Screenshot vom Ergebnis beigefügt, wie es am Ende aussehen soll.

Hat jemand vielleicht eine Idee, wie ich das Ganze sowohl im HTML als auch im CSS darstellen kann?

Bedanke mich schon mal im Voraus für Eure Hilfe.

Viele Grüße
Nuveon
 

Anhänge

  • screenshot.JPG
    screenshot.JPG
    120,1 KB · Aufrufe: 23

lord_haffi

Moderator
Teammitglied
Am einfachsten ist, du packst dein GIF gemeinsam mit den Elementen, die du darüber anzeigen möchtest (dein Text unten rechts in dem Fall) in einen div container. Der div container sollte genau die Größe des Bildes haben bzw. das Bild sollte den Container komplett ausfüllen. Den anderen darzustellenden Elementen gibst du dann ein position: absolute und z.B. bottom: 2em und right: 2em.
 

JR Cologne

Administrator
Teammitglied
Und position: relative für den div container nicht vergessen, damit die Positionierung nicht nach dem Bildschirmrand, sondern nach dem Rahmen des entsprechenden Elements ausgerichtet wird.
 

Thoamllica

Neues Mitglied
Erstelle zunächst die gewünschte Divbox mit deinem h2- und p-Tag im HTML-Code. Erstelle eine Hintergrundgrafik für deine GIF-Datei, die den gewünschten Look hat. Du kannst ein Grafikprogramm wie Photoshop oder GIMP verwenden, um dies zu tun. Füge das Hintergrundbild zur Divbox hinzu und positioniere den Text mit CSS.
 
Oben Unten