Need to put a watermark inside a WebBrowser

I am trying to read an HTML file in a WPF app with WebBrowser and I want to put a watermark between WebBrowser and the text which I navigate from HTML file.

I tried to use CSS in xaml.cs file but it wasn’t working. I do have 2 modes with a button which first is just background color and watermark and when I press the button it navigates the things in HTML such as images and text. I tried to do it like below.

private void LoadDefaultWebBrowserContent()
{
    string defaultHtml = "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=11\" />" +
           "<html><head><style>" +
           "html, body { height: 100%; margin: 0; padding: 0; background-color:#2C3040 !important; color: white; }" + 
           ".watermark { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); font-family:'Roboto', sans-serif; font-size: 38px;" +
           "color: rgba(102, 105, 117, 0.5); white-space: nowrap; pointer-events: none; }" + 
           "</style></head><body>" +
           "<div class=\"watermark\">ASC-YardimPanel</div>" +
           "</body></html>";

    ContentWebBrowser.NavigateToString(defaultHtml);
}

While this working well enough as a starter screen

private string ApplyHtmlStylesForDetailsWindow(string content)
{
    return "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=11\" />" +
           "<html><head><style>" +
           "html, body { height: 100%; margin: 0; padding: 0; background-color:#2C3040 !important; color: white; }" + 
           ".watermark { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); font-size: 20px;" +
           "color: rgba(102, 105, 117, 0.5); white-space: nowrap; pointer-events: none; }" + 
           "h1, h2, h3, h4, h5, h6, p, span, div {{ font-family: 'Roboto', sans-serif; font-size:12px; color: #9A9EB1 !important; }}" +
           "th, td {{ font-size:12px; font-family: 'Roboto', sans-serif !important; padding: 10px; border: 1px solid white !important  }}" +
           "td {{ background-color: transparent !important; }}" +
           "img {{ width:60%; height: 60% !important;}}" +
           "</style></head><body>" +
           "<div class=\"watermark\">ASC-YardimPanel</div>" +
           $"{content}" +
           "</body></html>";

This is not working (actually working but the "transform" line inside ".watermark" is not working while it’s working on top).

You need to sign in to view this answers

Related Post