1. The image
Choose one of the options below.
- I have the image code or the banner code ⇒ Show
Go immediately to step 2.

- I have an image online (e.g. on the cache page) ⇒ Show
The location of an image can be copied by clicking the image with the right mouse button. Depending on the browser you can now choose:
- Copy image-URL
- Copy image location
- Properties and copy the link behind Address (URL)
The image address you just copied will be referred to as the image location.

- I have an image on my computer ⇒ Show

2. Place the html-code
Now we are going to put the image on the profile. Go to: http://www.geocaching.com/profile/. Now click Edit Your Profile, or go directly through this link: https://www.geocaching.com/account/settings/profile.

At the bottom of the page you will find a header About, this is the area for your profile information.

Now, put at the location in the text where you want the image to show up, the code you already have.

Now, put at the location in the text where you want the image to show up, the following code:

<img src="Image location" alt="Description" title="Description">

The Image location is already explained above. This is the location (link) of the image.
The Description (2x) is just a description of the image. The description will show up while hovering over the image with the mouse pointer, for example: The geocache.
An easy way to build the correct code for an image is through the Image code generator

Now, put at the location in the text where you want the image to show up, the following code:

<img src="Image location" alt="Description" title="Description">

The Image location is already explained above. This is the location (link) of the image.
The Description (2x) is just a description of the image. The description will show up while hovering over the image with the mouse pointer, for example: The geocache.
An easy way to build the correct code for an image is through the Image code generator

3. Save changes
Finally we need to save the made changes. Click the Save Changes button at the bottom of the page.

4. Finished
Finished! The image is now visible on your profile.
Below you will find some extensions that might be handy.

5. Hyperlink
I might be useful to set up the image as a hyperlink. This means that if someone clicks the image a webpage (or image) will be opened. Use the following code for this:

<a href="Hyperlink">Image code</a>

Where hyperlink is the link to the webpage that needs to be opened.
The full code will then be:

<a href="Hyperlink"><img src="Image location" alt="Description" title="Description"></a>

6. Dimensions
Without resizing the images in advance it is possible to show the image with other dimensions than the original. This can be accomplished by adding the width and height attributes, expressed in pixels. An image with a width of 100 pixels and a height of 200 pixels will be:

<img src="Image location" alt="Description" title="Description" width="100" height="200">

By filling out both width and height the image might be pulled out of it's width-height ratio. Luckely it is also possible to use only one of the two. If, for example, only the width is used, the height will change accordingly. The code will then be:

<img src="Image location" alt="Description" title="Description" width="100">

7. Center
To center the image on the page we only need a small piece of code:

<p style="text-align:center;">Image code</p>

The full code will then be:

<p style="text-align:center;"><img src="Image location" alt="Description" title="Description"></p>