/
How to use an image as a tab title

How to use an image as a tab title

Owned by Technical Communications
Last updated: Jul 21, 2025

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

For example:

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:

    .tabs .tabs-menu .menu-item:nth-child(<tab number>) a { background-image:url(<attachmentURL>);} .tabs .tabs-menu .menu-item:nth-child(<tab number>) a { background-image:url(<attachmentURL);} .tabs .tabs-menu .menu-item a { height:50px; color: transparent; background-size:30px; background-repeat:no-repeat; background-position: 50%; }

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%; }

  1. Save the file as a CSS file and attach it to the same page.

  2. At the top, add the Composition Setup macro with the following macro body:

    import.css = <CSSAttachmentURL>

    For example:

    import.css = https://apps-demo.servicerocket.io/confluence-6.15.0/download/attachments/33948443/tabs.css?api=v2

  3. (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:

      <style> .aui-tabs.horizontal-tabs>.tabs-menu>.menu-item.active-tab a:link {color: transparent; user-select: none;} .aui-tabs.horizontal-tabs>.tabs-menu>.menu-item a {color: transparent; user-select: none} </style>

    • 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:

      .tabs .tabs-menu .menu-item:nth-child(<tab number>) a { background-image:url(<attachmentURL>);} .tabs .tabs-menu .menu-item:nth-child(<tab number>) a { background-image:url(<attachmentURL);} .tabs .tabs-menu .menu-item a { height:50px; color: transparent; background-size:30px; background-repeat:no-repeat; background-position: 50%; } .aui-tabs.horizontal-tabs>.tabs-menu>.menu-item.active-tab a:link {color: transparent; user-select: none;} .aui-tabs.horizontal-tabs>.tabs-menu>.menu-item a {color: transparent; user-select: none}

  4. Save the page and verify the result.