CODEWITHSUNDEEP
htmlcssdocexport-to-word
diana artist
diana artist

Reputation: 1

How to add watermark when exporting html to doc file with html & css?

I am trying to add a watermark when exporting html to doc but I am not sure where to start I searched everywhere but I couldn't find a solution , I tried to use background-image or img tag with position fixed to center but it doesn't work as expected , how can I add a watermark using mso- attributes?

I tried to use this code but it doesn't work , I expected to have a watermark on everypage with my logo when exporting html to doc

<div style='mso-element:header' id=h1>
  <p class=MsoHeader>
    <div style='text-align: center; position: relative;'>
      <img src="logo.png" alt="Watermark" style="opacity: 0.2; width: 200px; height: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
    </div>
    <img src="logo.png" alt="Header Image" width="80" height="60" />
  </p>
</div>

Upvotes: 0

Views: 52

Answers (1)

Kodd
Kodd

Reputation: 163

I don't know if you are looking for this, but you can use @media print to add a watermark when someone is trying to save your page as .pdf.

First create a watermark:

<div class="watermark">Watermark</div>

.watermark {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    /* Change accordingly */
}

Now make it visible when it's being printed:

@media print {
    display: block;
}

You can also use visibility or opacity to show/hide it.

Upvotes: 0

Related Questions