I'm trying to make a page header looking something like this:
https://docs.google.com/drawings/d/1Lp-8h_l_62FHduUHD2YP_QvQjW4BWCJxlIzBLsOB970/edit

Where the pink circle is a transparent image.

I have figured out how to achieve all of the individual elements using the @top header attributes, but when I try to combine them onlye one of the header elements shows up (in this case the @top element). What I tried looked something like this:

@page {

margin-left: 25mm;
margin-right: 25mm;
margin-top: 20mm;

@top-left-corner {
content: url("/path/to/image")
}

@top {
margin-left: -25mm;
margin-right: -25mm;
content: flow(header)
}
}

#header {
flow:static(header);
background-color: blue;
}

with the html containing:
<div id="header">
Some text here
</div>


I also tried putting all of the elements in the header div and then pulling that from the document and placing it in the header. However, the problem with that is that the image does not load when placed in the header.

Is there an elegant solution to this that I'm missing?

I can't see why either of those problems would occur.

When the image doesn't load, do you get any warning messages in the output log?

My problem was that the hostname that Prince was trying to use to load the image was wrong.