> For the complete documentation index, see [llms.txt](https://help.security.gallagher.com/knowledge-hub/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.security.gallagher.com/knowledge-hub/products/cc-software/configure/configuration-scenarios/scenario-card-layout-with-transparent.md). # Use transparent layers in card layouts Overlay images on cardholder photos by setting one image color as transparent. You can overlay a foreground image on top of a cardholder's photo on a printed card. The Card Layout editor does not support true transparency, but you can nominate a single colour to be treated as transparent. Create an overlay image with the "see-through" area in one solid colour (for example black), add it as a second image object over the cardholder photo, and set that colour as the transparent colour. ### Why this works Having a foreground image overlay the cardholder's photo is possible in Command Centre. Transparency is not supported within the Card Layout editor itself, but you can choose a colour to be transparent. First, prepare the overlay image in any image editor. Make the area you want to be see-through a single solid colour. In this example the **black** part of the image will be made transparent. ![Overlay image with the black area to be made transparent](https://328339335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6bM8WhlBE9BYizPWJaPN%2Fuploads%2Fgit-blob-2c93a69ce67f662f07666dac103edafc422a700f%2FSECHUB-CCS-CARDLAYOUT-01-overlay-image.png?alt=media) ### Procedure 1. In the **Card Layout editor** of your card type, add the image of the cardholder. ![Add the cardholder image object](https://328339335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6bM8WhlBE9BYizPWJaPN%2Fuploads%2Fgit-blob-b8910c104f4dac0e99b8cda072dcb36b404518f0%2FSECHUB-CCS-CARDLAYOUT-02-add-cardholder-image.png?alt=media) 2. Create the image object, then link it to the cardholder field (the cardholder image or PDF). ![Link the image to the cardholder field](https://328339335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6bM8WhlBE9BYizPWJaPN%2Fuploads%2Fgit-blob-55a38ed0ac92e84274a5a6487a1addf5a94cf414%2FSECHUB-CCS-CARDLAYOUT-03-link-cardholder-pdf.png?alt=media) 3. Create another image object to act as the overlay. ![Create the overlay image object](https://328339335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6bM8WhlBE9BYizPWJaPN%2Fuploads%2Fgit-blob-088398709cd2bd57d88e40c8ceb6b92a0010e403%2FSECHUB-CCS-CARDLAYOUT-04-create-overlay-object.png?alt=media) 4. Load the overlay image you prepared. ![Load the prepared overlay image](https://328339335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6bM8WhlBE9BYizPWJaPN%2Fuploads%2Fgit-blob-19f448c7148778a59cca38067533927c8ee21ef8%2FSECHUB-CCS-CARDLAYOUT-05-load-overlay.png?alt=media) 5. Make the chosen colour transparent. Select **Transparent Colour**. ![Select Transparent Colour](https://328339335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6bM8WhlBE9BYizPWJaPN%2Fuploads%2Fgit-blob-3665f57a4f4e47337df95f539cde146d6a79c108%2FSECHUB-CCS-CARDLAYOUT-06-select-transparent-colour.png?alt=media) 6. Select the colour to make transparent. In this case, **Black**. ![Select Black as the transparent colour](https://328339335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6bM8WhlBE9BYizPWJaPN%2Fuploads%2Fgit-blob-9a14bd4cb3ef857ae8a70f3f5d85252a6e34ec19%2FSECHUB-CCS-CARDLAYOUT-07-select-black.png?alt=media) 7. The black section is now transparent, revealing the cardholder photo beneath. ![Black section now transparent](https://328339335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6bM8WhlBE9BYizPWJaPN%2Fuploads%2Fgit-blob-00a23d29fe98f28a96e87cff1a887b65476b8004%2FSECHUB-CCS-CARDLAYOUT-08-black-transparent.png?alt=media) 8. Test the positioning to get the arrangement right. To preview the result, use the **Preview** option from the **Encode** tab of a cardholder. ![Preview from the Encode tab](https://328339335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6bM8WhlBE9BYizPWJaPN%2Fuploads%2Fgit-blob-cf9f2e3e3f0d34d6c1585dac4f100cf73a4333ca%2FSECHUB-CCS-CARDLAYOUT-09-preview-encode-tab.png?alt=media) ### Related links * [Command Centre - Cardholders & Credentials](/knowledge-hub/products/cc-software/configure/command-centre-cardholders-and-credentials.md). Cardholder photos and the card types this layout applies to. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://help.security.gallagher.com/knowledge-hub/products/cc-software/configure/configuration-scenarios/scenario-card-layout-with-transparent.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.