1. Das Bild
Wählen sie eine der unten gezeigten Optionen
- Ich habe den Bild- oder Banner-Code ⇒ Anzeigen
Gehen sie direkt zu Schritt 2.

- Ich habe ein Bild online (z.B. auf einer Cacheseite) ⇒ Anzeigen
Die Adresse des Bildes kann durch Rechtsklick auf das Bild kopiert werden. Abhängig vom Browser können sie nun wählen:
- Kopiere Bild-URL
- Kopiere Bildadresse
- Eigenschaften , dann kopieren sie den folgenden Link Adresse (URL)
Die Adresse des Bildes, die sie gerade kopiert haben, wird im Folgenden Bildquelle genannt.

- Ich habe ein Bild auf meinem Rechner ⇒ Anzeigen

2. Platzieren sie den HTML-Code
Jetzt stellen wir das Bild in das Profil ein. Gehen sie zu: http://www.geocaching.com/profile/. Klicken sie nun Edit your Profile oder nutzen sie direkt diesen Link: https://www.geocaching.com/account/settings/profile.

Am Ende der Seite finden sie eine Überschrift About, dies ist der Bereich für ihre Profilinformation.

Setzen sie nun an der Stelle im Text, wo ihr Bild auftauchen soll, den Code ein, den sie bereits haben.

Setzen sie nun an der Stelle im Text, wo ihr Bild auftauchen soll, den folgenden Code ein:

<img src="Bildquelle" alt="Beschreibung" title="Beschreibung">

Die Bildquelle wurde bereits weiter oben beschrieben. Es ist der Ort (Link) des Bildes.
Die Beschreibung(2x) ist nur eine Beschreibung des Bildes. Die Beschreibung erscheint, wenn sie mit dem Mauszeiger über das Bild fahren, zum Beispiel: Der Geocache.
Ein einfacher Weg den korrekten Code für ein Bild zu erstellen, ist über den Bildcodegenerator

Setzen sie nun an der Stelle im Text, wo ihr Bild auftauchen soll, den folgenden Code ein:

<img src="Bildquelle" alt="Beschreibung" title="Beschreibung">

Die Bildquelle wurde bereits weiter oben beschrieben. Es ist der Ort (Link) des Bildes.
Die Beschreibung(2x) ist nur eine Beschreibung des Bildes. Die Beschreibung erscheint, wenn sie mit dem Mauszeiger über das Bild fahren, zum Beispiel: Der Geocache.
Ein einfacher Weg den korrekten Code für ein Bild zu erstellen, ist über den Bildcodegenerator

3. Änderungen speichern
Zuletzt müssen wir die Änderungen speichern. Klicken sie auf Save Changes am Ende der Seite.

4. Fertig
Fertig! Das Bild ist nun in ihrem Profil sichtbar. Weiter unten finden sie einige Erweiterungen, die nützlich sein könnten.

5. Hyperlink
Es kann nützlich sein, dass Bild als Hyperlink zu erstellen. Das bedeutet, dass wenn jemand auf das Bild klickt, eine Webseite (oder ein Bild) geöffnet wird. Nutzen sie den folgenden Code dafür:

<a href="Hyperlink">Bild-Code</a>

Dabei ist Hyperlink der Link zu der Webseite, die sich öffnen soll.
Der vollständige Code ist dann:

<a href="Hyperlink"><img src="Bildquelle" alt="Beschreibung" title="Beschreibung"></a>

6. Abmessungen
Ohne eine vorab durchgeführte Größenänderung ist es möglich das Bild in anderen Abmessungen als im Original zu zeigen. Das wird durch das Setzen der Attribute width und height in Pixel erreicht. Für ein Bild mit einer Breite von 100 Pixel und einer Höhe von 200 Pixel nutzen sie:

<img src="Bildquelle" alt="Beschreibung" title="Beschreibung" width="100" height="200">

Wenn sowohl Länge als auch Breite gesetzt werden, kann es sein, dass sich das Höhen-Breiten-Verhältnis des Bildes ändert. Glücklicherweise ist es ausreichend eine der beiden Werte anzugeben. Wenn z.B. nur die Breite genutzt wird, wird die Höhe automatisch passend geändert. Der Code ist dann:

<img src="Bildquelle" alt="Beschreibung" title="Beschreibung" width="100">

7. Zentrieren
Um das Bild auf der Seite zu zentrieren, braucht man nur einen kleines Stück Code:

<p style="text-align:center;">Bild-Code</p>

Der vollständige Code ist dann:

<p style="text-align:center;"><img src="Bildquelle" alt="Beschreibung" title="Beschreibung"></p>