DOM PDF резка водяных знаков фона, когда текст небольшой

Question

У меня есть водяной знак bg на странице, и это изображение обрезается там, где заканчивается текст. Если текст, который я пишу на странице, больше, чем изображение, он работает, иначе изображение обрезается там, где заканчивается текст. Любые идеи? Спасибо.

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

Я не уверен, где ошибка происходит, но элемент #watermark, как представляется, обрезается до размеров объекта #container, даже если оно стилизовано position: fixed, который должен выньте его из нормального потока документа.

Простейшим решением было бы перемещать элемент # watermark вне элемента #container.

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>