DOM PDF cutting watermark background when the text is small - dompdf

Question

i have a watermark bg on a page and that image is being cut off where the text ends. If the text that i write on the page is bigger than the image, it works, else the image gets cut off where the text ends.
Any ideas?
Thanks.
body { width: 100%; min-height: 800px }
#container { margin:0 auto !important; width: 750px; overflow: hidden; }
* { font-family: 'Times New Roman' !important; font-size : 14px !important; text-decoration: none !important; margin : 0px;}
#container { width: 100%; }
#watermark { position: fixed; width: 382px; height: 470px; margin-left: 120px; margin-top: 190px; opacity: .07; }
#page {
margin-left: 3cm !important;
margin-top: 3cm !important;
margin-right: 2cm !important;
margin-bottom: 2cm !important:
}
<div id='container'>
<div id='watermark'><img src='http://placehold.it/1024x768' height='100%' width='100%' /></div>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
</div>

Answer 1

I'm not sure where the bug is occurring, but the #watermark element appears to be clipped to the size of the #container object even though it is styled with position: fixed which should take it out of the normal flow of the document.
The easiest fix would be to move the #watermark element outside the #container element.
body { width: 100%; min-height: 800px }
#container { margin:0 auto !important; width: 750px; overflow: hidden; }
* { font-family: 'Times New Roman' !important; font-size : 14px !important; text-decoration: none !important; margin : 0px;}
#container { width: 100%; }
#watermark { position: fixed; width: 382px; height: 470px; margin-left: 120px; margin-top: 190px; opacity: .07; }
#page {
margin-left: 3cm !important;
margin-top: 3cm !important;
margin-right: 2cm !important;
margin-bottom: 2cm !important:
}
<div id='watermark'><img src='http://placehold.it/1024x768' height='100%' width='100%' /></div>
<div id='container'>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
<p>t</p>
</div>