Adding watermarks to markdown pages?

[rachel-rigdon-sp]

Has anyone been able to apply watermarks or a semi-transparent image/text on markdown pages? I need to share a zipped version of my docs with a confidential watermark, similar to the image I've attached.

Would this be something we'd use CSS and the content override for, or is this something I should ask in the MkDocs repo instead?

[alexvoss]

One option would be to use a background image, which you could create as an SVG, for example, and you could use a drawing program to give it the slant and let CSS deal with the business of repeating it across the page.

Have a look to see if this would work:

.md-content .md-typeset {
   background-image: url("assets/images/draft.svg");
   background-size: 100%;
}

There is a chance that some elements may have a background that covers the image, though. Seems to be the case with admonitions. I am sure it is also possible to cook up some CSS that just places the draft message over everything. That would take a bit of research or deeper CSS skills than I have a the moment.

[alexvoss]

Found a Codepen that does a similar things and modified the CSS a bit to get this:

.md-content__inner.md-typeset:before {
  content: "DRAFT";
  -webkit-transform: rotate(331deg);
  -moz-transform: rotate(331deg);
  -o-transform: rotate(331deg);
  transform: rotate(331deg);
  font-size: 20em;
  color: rgba(255, 5, 5, 0.17);
  position: absolute;
}

Hope this helps. Might need some refinement.

[rachel-rigdon-sp]

Thank you so much! I'll give this a go and see if I can implement it. I appreciate your help!

[rachel-rigdon-sp]

@alexvoss This worked like a dream. I ended up changing the position to sticky so it would stay with the user as they scroll. Some elements do cover the text, but they're minor and insignificant. (Note the gif is not actually confidential lol)

Thank you so much for your help, and for sharing the link to Codepen - it looks like a great resource for the future!