---
title: "How to use an image as a tab title"
canonical: "https://support.appfire.com/space/CT/1562607781/How%20to%20use%20an%20image%20as%20a%20tab%20title"
format: markdown
---
> Macro (aura-html)

While the card labels usually use text for identification, it is possible to set them using an image.

For example:

![image](media://c1e3df71-5d2c-4851-85dc-ba05389a6a8b)

## Guide

To use images as the card labels, follow these steps:

1. Attach the images that you want to use as the card labels.
2. Add the Deck of Cards and Card macros and save the page.
3. Use a text editor to create a file with the following content:

For example:

```
.tabs .tabs-menu .menu-item:nth-child(1) a { background-image:url(https://apps-demo.servicerocket.io/confluence-6.15.0/download/attachments/33948443/Cursor-ffvi-gba.png?api=v2);}
.tabs .tabs-menu .menu-item:nth-child(2) a { background-image:url(https://apps-demo.servicerocket.io/confluence-6.15.0/download/attachments/33948443/Cursor-ffvi-gba%20copy.png?api=v2);}
.tabs .tabs-menu .menu-item:nth-child(3) a { background-image:url(https://apps-demo.servicerocket.io/confluence-6.15.0/download/attachments/33948443/Cursor-ffvi-gba%20copy1.png?api=v2);}
.tabs .tabs-menu .menu-item a { height:50px; color: transparent; background-size:30px; background-repeat:no-repeat; background-position: 50%; }
```

4. Save the file as a CSS file and attach it to the same page.
5. At the top, add the Composition Setup macro with the following macro body:
  For example:
6. (Optional) If you want to remove the text label completely, you can do one of the following:
  - Add an HTML macro with the following content:
  - Add the content from the previous option to the bottom of the same CSS file (without the `<style>` tag) and upload it to the same page. For example:
7. Save the page and verify the result.