TFCZ · Guide

Profil-Avatar in Emblem-Form

Kein rundes Profilbild und kein Rahmen drumherum — das Foto (oder die Initialen) füllen die echte TFCZ-Emblem-Silhouette. Umgesetzt mit einer CSS-mask aus emblem-white.png: gestochen scharf, skalierbar, exakt die Vereins-Kontur.

Foto in Emblem-Form
Mittel (Kommentar/Card)
Klein (Nav/Menü)

So baust du einen (copy-ready)

Ein <div> mit Foto als Hintergrund, maskiert mit dem echten Emblem. Verhältnis 321 × 366 — nur die Breite setzen, die Höhe folgt.

<div class="tfcz-ava" style="background-image:url(PFAD/foto.jpg)"></div>

.tfcz-ava{
  width:96px; aspect-ratio:321/366;
  background-size:cover; background-position:center;
  -webkit-mask:url(assets/img/emblem-white.png) center/contain no-repeat;
          mask:url(assets/img/emblem-white.png) center/contain no-repeat;
}
Regeln: Nie rund, nie mit Ring/Rahmen drumherum — immer die Emblem-Silhouette (Maske aus emblem-white.png). Foto formfüllend (background-size:cover). Ohne Foto: Emblem-Fläche mit #005a94→#0d273d-Radial füllen und Initialen mittig setzen (Key Player = Gold).

Fallback ohne Foto

VO
Initialen im Emblem
MS
Key Player (Gold)
TFCZ Emblem
Reines Emblem