The last step is to adjust the tabCon and tabCon2 containers in the CSS file. The key here is to make the top container, tabCon, 50% transparent. We do this by adding "opacity: 0.5;". Then we can see the bottom container, the image, through the top container.
Here is the example code for the CSS file:
The end result should be the Tableau Public Viz overlaid on top of another container with an image. In addition to an image, this can also be done with one Tableau Viz on top of another Tableau Viz. However, keep in mind that the top viz needs to be somewhat transparent so that you can see the bottom container and the bottom container will not allow any interaction, for example clicking, highlighting or tooltips. This is because the Tableau viz on top will be covering anything underneath it.
We can combine this double container with last month's post, using the HTML style object properties to style the top container. Here's an example
of what that might look like.
Here is an example
of placing one Tableau viz on top of another.
WARNING - Be careful using this technique. This effect could create problems with your visualizations, making it hard for the reader to see the visualization or distracting the reader from the data. For example, in the viz above, the bar charts are difficult to read with the busy image in the background and the opacity of the bars. This technique will require the right kind of balance and use case to be useful in practice.
I hope you find this technique interesting. If you have any questions feel free to email me at Jeff@DataPlusScience.com
Jeffrey A. Shaffer
Follow on Twitter @HighVizAbility