If you use “Parallax Scrolling”, or when a part of your page is set to 100% of the browser height, the heatmap might not be shown correctly. Typically, the header would be shown stretched over the whole heatmap and other parts of the web page would not be visible. To solve this problem, set a max height to this element using CSS or JavaScript. For example:

.welcome { max-height: 1000px; }

If you want to set this style only for Heatmaps, you can prefix your selector with “html.piwikHeatmap”:

html.piwikHeatmap .welcome { max-height: 1000px; }

The chosen 1000px is only an example, you can set it to any height. Learn more about custom stylesheets.

Previous FAQ: How do I apply custom stylesheets when a heatmap is generated or a session recording replayed?