Transparente GIF mit Muster füllen

[g0ser]

Hi Leute,

ich hab ein kleines Problem mit einem Background Image.
Und zwar hab ich verschiedene GIF Dateien die verschiedene Formen enthalten.
Z.B: Dreiecke, Kreise
Die Fläche der Formen sind jeweils transparant gelassen.
Nun möchte ich auf meiner Seite diese Fläche mit einem Muster ausfüllen.

Dazu hab ich eine Tabelle erstellt und dann in der Zelle ein <div> mit Background Image eingefügt.

Das Problem, dass ich habe ist das die Bilder verschiedene größen und Formate haben können die vorher nicht festeingetragen werden können da zum Teil nicht bekannt.

Dadurch wird z.b. die Zeilenhöhe an das größte Bild angepasst. Wenn in der gleichen Zeile ein Bild drin ist das eine kleinere Höhe hat, ist das Hintergrundbild zu sehen da die Zelle vom Bild nicht ganz ausgefüllt werden kann.

Gibt es da irgendwie eine andere Möglichkeit die Idee umzusetzen oder kann man das irgendwie anpassen damit auch wirklich nur die transparente Fläche mit dem Muster befüllt wird?

Wäre für jeden Tipp sehr dankbar.

 

[mermshaus]

Willkommen im Forum.

Eine Beispielseite wäre glaube ich gut. Ich kann mir das nicht genau vorstellen.

 

[Elroy]

Hallo.

Wozu brauchst du die divs?

Die sind semantisch falsch und völlig unnötig.
Gib deinen Grafiken das Backgound Image.

Gruss
Elroy

 

[g0ser]

Hi,

Eine Beispielseite wäre glaube ich gut. Ich kann mir das nicht genau vorstellen.

Hatte auch daran gedacht. Aber da es nichts großes ist hab ich gedacht das es reicht es zu beschreiben.
Also am besten stellt man sich ein Bild mit schwarzem Hintergrund vor.
Nun schneidet man innen drin eine kleine Dreiecksfläche aus und löscht sie. So speichert man es nun als GIF wobei dann das Dreieck transparent ist und außen rum halt noch der schwarze Hintergrund.

Nun möchte ich auf meiner Seite dieses Dreieck sozusagen mit einem Muster "füllen".
Dazu lege ich halt dieses GIF über einen Hintergrund mit einem Muster damit dann das Muster durch das Dreieck zu sehen ist.
Hoffe das war gut erklärt.

Wozu brauchst du die divs?

Die sind semantisch falsch und völlig unnötig.
Gib deinen Grafiken das Backgound Image.

Die divs haben eigentlich keinen wirklichen Grund.
Danke für deinen Tipp. Hatte ganz vergessen das ich beim img einfach das Hintergrundbild einfügen kann. So wird es ja dann automatisch genau so groß wie das Bild und nicht wie die Zelle.

Nun hab ich noch ein anderes Problem.
Und zwar ist das Hintergrund Bild kleiner als das transparente GIF. So wird ja dann automatisch ein Repeat gemacht. Allerdings sieht man bei einigen Muster die Übergänge sehr deutlich und bei anderen passen die Übergänge fast perfekt.

Ich glaub zwar das ich es noch irgendwie verbessern kann wenn ich die größen der Bilddateien anpass aber ich weiß auch noch nicht wie es am besten passt.

Als Beispiel:
Hintergrunddatei mit Muster ähnlich wie bei einer Tapete.
Damit das Muster auch richtig dargestellt wird muss es ja proportional zum GIF verändert werden.
Das klappt bei einigen Mustern und bei anderen sieht man halt die Übergänge.

 

[mermshaus]

Dann halte nach Mustern Ausschau, die kachelbar sind. Zu Englisch heißt das unter anderem „tileable patterns“ oder „tiling patterns“. Ich glaube, es gab noch eine bessere Bezeichnung. Vielleicht einfach nur „tiles“.