Forum How do I...?

How can a bleeding image cover footer region content?

I have the following challenge:

The publication I'm working on allows images to bleed into the margins (using negative margin CSS).
This works well, but when I have an image floated to the page bottom and bleed into the footer region, where I display the page numbers and publication name, those remain on top of the image.

How can I have the bleeding image always cover the footer region?

Thank you!
Here's an example of an image bleeding to the page margin, using a named page without page numbers:

Perhaps this approach would work for your use case?
Thank you, @howcome, that helped.

The only issue now is that Prince adds a page break before the image that references the @page rule. How can I avoid this?

Prince adds the page break by default:
"Prince will create a page break between elements belonging to different named pages."

It would be good if there was a way to avoid this.

Edited by ThePrintingSquirrel

Here's an example that nulls a string when a page float appears. A pseudo-element brings the counter back.
@page {
  @bottom { content: string(bottom) }
body { string-set: bottom counter(page) }
div { float: bottom; background: beige; string-set: bottom "" }
div:after { content: ""; string-set: bottom counter(page) }

Please find complete example in attached file. There should be a more straightforward way to do this, but I think the approach will work. Let us know.
  1. bar.html1.6 kB

Edited by howcome

Hi @howcome,

that is a great solution, thank you. I can confirm it works in my case. Here is my code with a CSS variable since I use separate CSS files. I had to give the ::after content either a positioning or display property for it to work.

Default folio CSS file:
body {
	--companyName: counter(page) " \00a0 \00a0 \00a0 \00a0 My Company";
	string-set: companyName var(--companyName);
@bottom-left {
	content: string(companyName);

Main CSS file with bottom-floated bleeding image:
.pdf-float-bottom.pdf-bleed {
	string-set: companyName '';
.pdf-float-bottom.pdf-bleed::after {
	content: '';
	string-set: companyName var(--companyName);
	/* Needs to have either 'position' or 'display' property set */
	position: absolute;
	/* Just to make sure nothing is displayed on the page */
	left: -9999em;

Thank you so much for your help solving this one!
Great, thanks for sharing your code!