Element on every page when printed in WebKit
For example, I'm trying to show <div>
or <img>
on all pages when printing in WebKit.
This works in IE / FF:
@media print {
.logo {
position: fixed;
right: 0;
top: 0;
}
}
<div style="page-break-after:always"></div>
<div style="page-break-after:always"></div>
<img class="logo" src="http://placehold.it/100x100/" alt="" />
It looks like this is a great bug in WebKit, are there any workarounds? Thank.
source to share
This is how it should work for the watermark ...
div.watermark{
display:none;
}
and then for @media print
div.watermark{
display:block;
position:fixed;
z-index:-1;
width:100%;
height:100%;
}
div.content > *:first-child,x:-moz-any-link{margin-top:0;}/* ff only */
div.watermark,x:-moz-any-link{z-index:auto;}/* ff only */
div.watermark,x:-moz-any-link,x:default{z-index:-1;}/* ff3 only */
@media all and (min-width: 0px){div.watermark{width:8.5in;}} /* opera only */
div.watermark div{
position:absolute;
left:0;
width:99%;
}
I think this article explains what you want effectively http://www.andypemberton.com/css/print-watermarks-with-css/
Unfortunately this is still a webkit issue .
Solution . You have to clone your image class using javascript after each one say the default page size in pixels and keep it hidden from the screen and add ...
page-break-before: always;
page-break-inside: avoid;
display:block
Look at this answer for details fooobar.com/questions/18574 / ...
And have a look at this demo http://fiddle.jshell.net/jaap/7ZGVv/2/show/
Not bad IMO.
source to share