I have a background image I'm placing in the top-right, but it is placed in a way that it extends into the top-right-corner margin box. However, instead of extending into that region of the page, the image is cut off on the right side. I thought this might be due to painting order of the margin boxes, so I tried both:
- setting background for top-right-corner to none, but that was still cut off on the right,
-moving the image into the top-right-corner with a negative x position, but that only lead to it being cut off on the left side.

I have the same size image set in top-left with a negative x position, and that looks fine. Thoughts?

Here's the relevant CSS:
@page {
size: 8.375in 10.875in;
marks: crop cross;
prince-bleed: 0.125in;
prince-trim: 0.125in;
line-break: strict;
}
@page assessment:right {
margin: 8pc 4pc 5.5pc 7pc;
@top-right {
content: "Chapter " counter(chapterNo) ": " string(chapterTitle);
text-align: right;
vertical-align: top;
padding-top: 2.83pc;
padding-right: 3pc;
background-image: url("images/Grockit_bubble_gray_recto.svg");
background-repeat: no-repeat;
background-position: 37pc 2.25pc;
background-image-resolution: 300dpi;
background-size: 4.5pc auto;
}
@top-right-corner {
content: counter(page);
text-align: right;
vertical-align: top;
padding-top: 2.83pc;
padding-right: 4pc;
}
}
@page assessment:left {
margin: 8pc 7pc 5.5pc 4pc;
@top-left {
content: string(bookTitle);
text-align: left;
vertical-align: top;
padding-top: 2.83pc;
padding-left: 3pc;
background-image: url("images/Grockit_bubble_gray_verso.svg");
background-repeat: no-repeat;
background-position: -2.25pc 2.25pc;
background-image-resolution: 300dpi;
background-size: 4.5pc auto;
}
@top-left-corner {
content: counter(page);
text-align: left;
vertical-align: top;
padding-top: 2.83pc;
padding-left: 4pc;
}
}

Backgrounds can't extend outside their containing box.

You could put the image in the content property, or you could flow a block to the header instead.

Hm...what's odd is that it appears to work on the verso page (background image overlapping into the next margin box). I'll fiddle around with other options for the recto page, but any idea why the behavior is different? I've attached sample PDFs for comparison.

1. Pages from full_book.pdf‎ 36.7 kB

Disregard last post! I figured out why the verso appeared to have a different result—a separate default @page:left background image was set in the CSS, and they happened to align just right to look like the whole image. That might actually work for our purposes as a solution... Will have to test.

Thanks!