Say we want to generate a logo image on the bottom-right corner of every page without using the page margin area. With the attached code, both Chrome and Firefox print the logo image on every page, but Prince only generates the logo image on the last page.

I suppose a fixed element should be contained in the page area, and thus should appear on every page... Is there a workaround to achieve the desired effect? Thanks!

1. demo.zip‎ 1.9 kB

At the moment you would need to use the page margin area or the overlay page region, is there any particular reason why this would cause problems?

Thanks a lot for your reply! The overlay is good for our need. But still curious about why the logo image is generated only on the last page... A solution that works across different rendering engines would be better.

Unfortunately "background-position: fixed" is not a very convenient thing to implement, nor very flexible for most purposes. Hopefully other rendering engines will support @page rules properly in the future.

OK, thanks again!

Running elements will easily place a logo on every page. I've added an example to this guide:

https://css4.pub/2022/running-headers/

Thank you, @howcome. I've read your article before posting. Really appreciate your web site.

By the way, any chance of a CSS-only solution, without adding an logo element into the page (like my attached demo)?

Edited 21 Jul 2022 by yyang

Sure:

https://css4.pub/2022/running-headers/#running-elements-in-css

Thanks for your help! I searched again and see that the "fixed" position is not easy to properly implement. (It looks really tempting for placing "every page" element inside the page area, as promised by the CSS spec.)

I change my previous code a little and use "@media not(scripting: enabled)" to target Prince (see demo1.html). Surprisingly the logo image still appears on the last page. It should be hidden, right?

1. demo.zip‎ 2.7 kB

We recommend using running headers and footers:

https://www.princexml.com/forum/topic/3611/position-fixed-does-not-repeat-on-every-page-as-it-should