I'm preparing a layout which will be used for both offset printing and web display – which means I need 2 sets of images (one high-res in CMYK and another low-def in RGB), which I will use with two different style sheets (along with RGB and CMYK color values for text etc.) -- and applying the appropriate images as background images on divs.

So, I'm looking for a way to resize background images with width and height values – which is the most 'intuitive' way to deal with this, as the images will have a specific size.
(I'm also using and inner/outer wrapper construction to move/crop and scale images within a fixed frame)

There's a CSS3 property which is background-size, but Prince doesn't seem to recognize it.

Prince does recognize the background-position property, though, which is already useful, and solves half the problem.

The only way I can think of is to use the prince-background-image-resolution property, but this will be a bit of a pain since

1) I have to store and maintain two sets of resolutions for two sets of images to get the right size in the layout

2) I'll basically have to do the layout in InDesign to figure out the appropriate resolutions of the images when they're in the proper position, which, well, kind of defeats the purpose

Anyone have any 'thinking outside the box' ideas on how to approach this? Using a content: property rather than background-image, which would allow resizing? Using standard IMG tags and swapping out the SRC with some obscure CSS magic, or using javascript to dynamically load both the image src's and the appropriate print or screen css files?

You can certainly use JavaScript to change the image src attributes to load screen or print images. Is that enough to solve the background issue though?

Using javascript would pose another set of problems, so, I'll probably wrap up everything in PHP and generate the <img> tags I need for the different versions – something I was planning on doing eventually anyway for this project. (or take the background-image-resolution route)

Width and Height controls on background images would be nice to have, eventually, though – especially since they would nicely compliment the background-position property... just a suggestion.


@mikeday: this leads to a question I've wanted to ask you: in the medium/long term, do you see PrinceXML evolving along a tight, strict, standards-compliant rendering approach, with as little as possible prince-specific functions; or do you see it growing a larger set of selectors, properties and functions specifically tailored to page layout and print-production?

It seems that as CSS3 support progresses (and the CSS3 paged media spec.), a lot of pixels-vs-paper issues will be ironed out, and developers using Prince can leverage their experience in CSS with little new or 'incompatible' features to deal with. On the other hand, it seems that there are a ton of micro-issues (i have a long list already ) where CSS translates uncomfortably to paper – and as a designer moving from InDesign to PrinceXML, a lot of re-adjusting to do, and roundabout hacks to do 'easy' things.

I don't see either answer as being more correct, but just wondering how you're leaning…

In any case, the work you're doing with Prince is *awesome*, I'm so happy to be using it – thanks.

Ideally the CSS specifications and other web standards would contain every feature we would ever need, and all we would have to do is implement them all. In practice, there are many features we need that other implementations don't, so sometimes we have to lead by example. Some of our CSS extensions have made it into the standards, and some we have been able to replace with new extensions from other implementations. Overall, it helps everyone if we stick to the standards where we can, and extend the standards where we have to.