---
title: "How to display the page banner image lighter"
canonical: "https://support.appfire.com/space/CT/1561987581/How%20to%20display%20the%20page%20banner%20image%20lighter"
format: markdown
---
> Macro (aura-html)

You can use the HTML macro to display the page banner image in a lighter color tone.

Here’s an example of a banner before and after this type of customization:

Before:

![image](media://3851f2e1-5061-4bf1-8736-a43c24568c6f)

 After:

![image](media://fd5cbc82-be6b-4b9f-be0a-8b06ed863932)

To achieve this, above the Page Banner macro configured with an image URL, insert an [HTML macro](https://confluence.atlassian.com/doc/html-macro-38273085.html?__hstc=72543820.964b19cc9a0c9b849afafb75cb027707.1666792027896.1670962297444.1671028531342.101&__hssc=72543820.14.1671028531342&__hsfp=2718063962) with the following macro body:

`<style> .composition-banner-overlay {background-color:rgba(0,0,0,0);} </style>`