I'm trying to add an image that covers the front page completely.

For that purpose there's an empty first chapter

<chapter id="cover" />

and the CSS seems to work somewhat:

chapter#cover {
  page: chapter-cover;
}
@page chapter-cover:first {
  background-image: url("images/cover-image.jpeg");
  background-size: 100% 100%;
  prince-background-image-resolution: "300dpi";
}

However, the image, being a 834px by 1200px, is way too large for a 6in by 9in page. I can't figure out how to scale it to fit?

The DPI values used with prince-background-image-resolution should not be quoted, ie.

prince-background-image-resolution: 300dpi

Prince 8.1 does not support the background-size property, but the next release of Prince will.

Another option is to use generated content instead of background-image, like this:

chapter#cover {
    content: url("images/cover-image.jpeg");
    width: 100%
}

Thanks Mike, getting closer... What I ended up doing and what seems to work is a combination of you proposal and my initial code:

chapter#cover {
  page: chapter-cover; 
  content: url("images/cover-image.jpeg");
  width: 100%;
  height: 100%; /* Image not stretched? */
}
@page chapter-cover:first {
  margin: 0;
}

However, somehow it seems that now my text has gotten smaller, as if the document-wide text size had changed?

EDIT: No, the weird font size change seems to come from adding "marks: crop || cross;" to my main @page. Removing and everything is back to normal.

Enabling crop marks doesn't change the font size, but it does increase the size of the physical sheet of paper, which will then be trimmed down the specified size (eg. A4). This might make the text look smaller if you view it in Acrobat, as it could zoom out the page to show the increased paper size.

That'd explain it

A belated and related question: specifying a full-page image with a maximum height:

chapter#cover {
    content: url("images/cover-image.jpeg");
    height: 100%; /* width might be narrower than the page's width */
}

How would I center this image on the page? Because it's not a background image, the background-position property doesn't apply, and text-align doesn't seem to have an effect.

How about specifying "auto" for margin-left and margin-right?

That seems to stretch the image to its own 100% instead of the full page height

It's possible to get this working using position:absolute but I'm still exploring if that's the best way to do it or not..

chapter#cover {
    content: url("images/cover-image.jpeg");
    position:absolute;
    left: 35%; /* depends on width of the image - must be tweaked.. */
    height: 100%; /* width might be narrower than the page's width */
}

Announcement: repos for tests/utils

The CSS below should scale a background-image proportionally and center it vertically and horizontally. This is achieved through background-size and background-position.

chapter#cover{
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url(images/cover-image.jpeg);
    background-repeat: no-repeat;
    background-size: auto 80%;
    background-position: center;
}

Announcement: repos for tests/utils