Element on every page when printing in WebKit

Question

For example, I'm trying to have a <div> or <img> appear 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="" />

Seems like this is an outstanding bug in WebKit, are there any workarounds? Thank you.

Also tested in Chrome looks fine http://jsfiddle.net/4ed1x0x6/ — scniro, Jan 11 '15 at 21:10
You must add enough content in the html for the print preview to have multiple pages. In Chrome the image will only be on the first page, whereas IE/FF will have one on each page. — Nine, Jan 11 '15 at 21:18
Interesting. Seems like it's been around for a long time and no apparent workaround: https://code.google.com/p/chromium/issues/detail?id=303728 — Bruford, Sep 24 '15 at 14:32

score 1 · Answer 1 · edited Feb 20 '20 at 03:30

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 to do effectively http://www.andypemberton.com/css/print-watermarks-with-css/ (archived link)

Unfortunately this is still an issue with webkit.

Solution: You have to clone your image class with javascript after every say a standard page size in pixels and keep it hidden for screen and add...

page-break-before: always;
page-break-inside: avoid;
display:block

Look at this answer for details https://stackoverflow.com/a/19170212/1278540

And look at this demo http://fiddle.jshell.net/jaap/7ZGVv/2/show/

Not bad IMO.

Element on every page when printing in WebKit

1 Answers1