Foreground watermark doesn't show in IE 11

Question

The CSS below works for most browsers like FF, Chrome, Edge, but it doesn't work in IE 11. Can someone help me?

Here is the CSS that I am using: .watermarked {

   position: relative;

   }

   .watermarked:after {

   content: "";

   display: block;

   width: 100%;

   height: 100%;

   position: absolute;

   top: 0px;

   left: 0px;

  background-image: url('../../../../images/longdraft.png');

   background-size: contain; /* Make background take entire page */

   background-position: center; /* Center Background */

   background-repeat: no-repeat;

   opacity: 0.5;

   }

If Possible, adding an image of expected behavior and current behavior will help understanding the issue better. — Supun De Silva, Jun 10 '20 at 23:26
I use the CSS above to create preliminary information for a client using HTML.
... — Beatriz Saeed, Jun 11 '20 at 13:03

score 0 · Answer 1 · answered Jun 11 '20 at 02:11

According to this thread and your code, I have created a sample using the following code, it works well on IE 11 browser. Please check it.

    <style>
        .watermarked {
            position: relative; 
            text-align:center;
        }

            .watermarked:after {
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0px;
                left: 0px;
                background-image: url("http://placehold.it/100x100/09f/fff.png");
                /*background-size: 100px 100px;
                background-position: 30px 30px;*/ 
                background-size: contain; /* Make background take entire page */
                background-position: center; /* Center Background */
                background-repeat: no-repeat;
                opacity: 0.5;
            } 
    </style>
    <div class="watermarked">
        <img src="http://placehold.it/500x325.jpg" alt="Photo">
    </div>

The output like this (IE11 browser):

So, please try to use F12 developer tools to check related CSS style and HTML elements, whether the image is load success in IE browser and the CSS style is applied. If still not working, perhaps the issue is related to other CSS style, you can post the Enough code to reproduce the problem as in Minimal, Complete, and Verifiable example.

Besides, since, you want to add watermark image. If you want to add the watermark image overlay another image, you could also check this sample (Code from this link):

<style>
    #image {
        /* the image you want to 'watermark' */
        height: 200px;
        /* or whatever, equal to the image you want 'watermarked' */
        width: 200px;
        /* as above */
        background-image: url(https://www.davidrhysthomas.co.uk/linked/astrid_avatar.png);
        background-position: 0 0;
        background-repeat: no-repeat;
        position: relative;
    }

        #image img {
            /* the actual 'watermark' */
            position: absolute;
            top: 0;
            /* or whatever */
            left: 0;
            height:200px;
            width:200px;
            /* or whatever, position according to taste */
            opacity: 0.5;
            /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
            filter: alpha(opacity=50);
            /* for <= IE 8 */
        }
</style>
<div id="image">
    <img src="http://placehold.it/500x325.jpg" alt="..." />
</div>

IE 11 result:

score 0 · Answer 2 · answered Jun 11 '20 at 12:56

0

It works for putting an image on top of an image, but it does work for putting the watermark image on top of page contents created with HTML.

answered Jun 11 '20 at 12:56

Beatriz Saeed

11
1

please check my new reply, and try to add a watermark image on the top of Html page contents. – Zhi Lv Jun 12 '20 at 02:28

score 0 · Answer 3 · answered Jun 12 '20 at 02:27

It works for putting an image on top of an image, but it does work for putting the watermark image on top of page contents created with HTML.

From your description, I suppose you want to add the watermark image on the top of Html contents (such as the table). If that is the case, you could check the following methods.

Using the CSS background image property.

<style>
    .watermarked table {
        width: 600px;
        height: 600px;
        position: absolute;
        top: 0px;
        left: 0px;
        background-image: url("http://placehold.it/500x325.jpg");  
        background-size: cover; /* Make background take entire page */
        background-position: center; /* Center Background */
        background-repeat: no-repeat;  
        opacity: 0.5;
    }
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }

    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    } 
</style>
<div class="watermarked">
    <table> 
          <!--...table content...-->
    </table> 
</div>

The result like this:

Add a mask layer on the top of the html content, and use it to display the the watermark image.

Code as below:

<style> 
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%; 
    }

    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }

    tr:nth-child(even) {
        background-color: #dddddd;
    }
    /*mark layer*/
    .layer {
        background: url('http://placehold.it/500x325.jpg');
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        border: 1px solid black;
        opacity: 0.6;
    }
</style>
<div class="background">
    <table>
         <!--...table content...-->
    </table>
    <div class="layer"> 
    </div>
</div>

The result like this:

Foreground watermark doesn't show in IE 11

3 Answers3