Background watermark in HTML and CSS not aligning properly according to foreground content

Question

I am trying to design a page that has a Watermark or background text, footer bottom aligned and header. I have two problems:

When I add less content, the watermark looks fine. But when adding large content that fills up page, the watermark goes out of page. I want my watermark to flow from Bottom-left to Top-Right always, doesn't matter how much content the body has.
The Watermark text is selected when I select foreground text. How to disable selection in Watermark?

Here's my code: https://jsfiddle.net/appsoln/qeo0dLuk/

<!DOCTYPE html>
<html style="height:100%">
<head>
    <style>
        .bgtext { position: relative; }

.bgtext:after {
    content: 'COMPANY NAME';
        width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    color: #000;
    color: rgba(0, 0, 0, 0.2);
    font-size: 100px;
    font-family: Arial, sans-serif;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
footer{ position: fixed; bottom: 1px; width:100% } h1 {border-bottom: 5px double black;}
    </style>
</head>
<body style="margin:0;height:100%">
    <header>
<div style="text-align:center;">
    <h1>
        TITLE
    </h1>
    <h3>
        SUBTITLE
    </h3>
</div>

    </header>
    <div class="bgtext">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>
    <footer>
<div style="border-top: 1px solid black;">
    <table style="width:100%">
        <tr>
            <td style="width:50%;text-align:left;word-break:break-word">
                Address: COMPANY ADDRESS
            </td>
            <td style="width:50%;text-align:right;word-break:break-word">
                Helpline: 1234567890
            </td>
        </tr>
    </table>
</div>


    </footer>
</body>
</html>

Hi! can we assume the page will always and only contain text like this? — roberrrt-s, Sep 16 '19 at 22:04
Also, your second question is answered here: https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting — roberrrt-s, Sep 16 '19 at 22:07
@Roberrrt No page may contain text and small images. Also, it will have HTML tables. It will be dynamically generated data by user. And thank you for the link. I will try that out. — Aishwarya Shiva, Sep 16 '19 at 22:08

gael · Answer 1 · 2019-09-17T09:11:19.767

The element with a CSS rotation watermark goes out of page even with small text when viewed on small screens.

Its because of the rotation axis transform-origin which is by default on the center of your element, here .bgtext::after

To prevent the element to rotate outside its parent you can set transform-origin to top.

.bgtext { position: relative; }

.bgtext:after {
    content: 'COMPANY NAME';
        width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom:0;
    z-index: -1;
    color: #000;
    color: rgba(0, 0, 0, 0.2);
    font-size: 100px;
    font-family: Arial, sans-serif;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    transform-origin: top;
}
footer{ position: fixed; bottom: 1px; width:100% } h1 {border-bottom: 5px double black;}

You will also notice the position of the watermark is not defined to top:0; anymore but to bottom:0; because of the different axis.

You will certainly have to manage this position for different screen sizes for a responsive page.

Here is my Fiddle

Background watermark in HTML and CSS not aligning properly according to foreground content

1 Answers1