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).

Solution

I don't know how to delete my own question so i'll just say how i fixed it. Instead of using WebBrowser I used WebView2 NuGet and it fixed the issue.