I'm trying to figure out a way to add an image to the header so that it spans the full width of the page.

If I flow it into any of the @top-left, @top or @top-right boxes it only spans the width of the content area (minus any margin applied to the @page).

In other words, with this CSS:

@page {
  size: Letter;
  margin: 1in;
}

@page cover-letter {

  @top {
    width: 100%;
    content: flow(header-2-left);
  }

}

.cover-letter {
   page: cover-letter;
}

And this HTML:

<div class="header-2-left"><img src="Header.jpg"></div>

the image in the header is 6.5in wide and centered instead of 8.5in wide and spanning the full width of the page.

It seems like the header margin boxes account for the page margin and can never span the full width unless you remove the margin completely.

I could probably set the image as a background of the page but due to the way our app works and how the html is generated, it would be a lot easier if we could use the flow() feature.

What if you specify "width: 8.5in" instead of 100% for the @top margin box?

That worked. Thanks!