How to disable Black Overlay for Header Image?

If you are using any of the below designs for your Header (in 'Header' sheet), you would usually see a black overlay on top of the background image.

  • Design 3 (Image at background & Text Left)

  • Design 4 (Image at background & Text Right)

  • Design 5 (Image at background & Text Center)

  • Design 6 (Image at background & Text left & Image right)

  • Design 7 (Image at background & Text right & Image left)

Follow below 2 steps to add the required CSS to the page to turn-off this black overlay in the header image.

  1. Goto 'Advanced Settings' sheet

  2. Add CSS Style as below.

<style>#blackOverlay{display:none;}</style>

Your Google Sheet would look like this.

Make sure to use the 'live test' link to pull the latest changes and test.

Last updated