Print Resolution Issue

When I print, background-image pictures come out offset.

[cmarshall]

I have an issue. I use a media-dependent link to a CSS file for media="print". This has a few overrides to blank out headers, etc.

It also displays a <div> with a background-image that acts as a page header. I do the typical thing with the <div>, giving it a height and width, and use a background-image (I use background-image, as opposed to <img>, because it allows me to use CSS to completely modify the page, and I don't have to touch the XHTML).

However, on both FF and IE, the image is displayed in a strange way. It is actually enlarged past its native size, and is cut off on the right and left (I display once in the top center of the page).

It seems to be an issue with the native resolution of the page, and only happens for printing.

Is this something I'm not setting right? Is there a way I can prevent this?

[penders]

It seems to be an issue with the native resolution of the page...

What is the 'native resolution' of your page? Generally, I've had problems trying to print a 'fixed width layout' that is anything wider than around 650px (plus margins) at 100% (as opposed to 'shrink to fit' or anything like that) - with the right edge being chopped.

With a screen res of 96 dpi and an approx 6.75inch print width on A4 indicates that 648 screen dots should fill the page width (at 100%), which sounds about right.

(background-image) ...It is actually enlarged past its native size...

Hhhmmm, I seem to get the opposite... background images are shrunk to the size of a micro-dot by comparison with their on-screen equivalent!

Maybe it's an issue/feature with your printer/driver? (Or with mine?!)

I use background-image, as opposed to <img>, because it allows me to use CSS to completely modify the page, and I don't have to touch the XHTML

Background images are certainly easier/cleaner to deal with, but bare in mind that they don't print by default - the user has to explicitly turn this feature on in their browser printer settings.

[cmarshall]

I think it has to do with 96dpi vs. 80dpi vs. 72dpi, etc.

The printer driver extrapolates the resolution from the page.

In this particular instance, I can use a real <img> because the page is generated by PHP, but I don't know if I can get away with that in other applications.

Thanks for the response. I was a little disappointed in the sound of crickets chirping.

[penders]

Printing (from the web) is often a fiddle... there are so many webpages out there that don't print properly, if at all! It is very much an afterthought for most I recon (if a thought at all) - perhaps why the slow response to your post. I think most are happy if the pages content prints in a broadly readable fashion - personally I try to keep pretty graphics and certainly navigation down to the bear minimum in any printed media and am usually rather happy that background-images don't print. :)

[cmarshall]

Yeah, but that's also a plus for my sites. I want the printouts from my sites to be very usable in the real world, not just as a rough draft.

I suspect we'll see more in the next few years.

[jessejump]

Browsers print at 96ppi (images and tables)
Images are printed from within a browser at 96 ppi regardless of the ppi set in Photoshop etc.

[cmarshall]

I'll use a regular <img> tag, and that will fix it. Sadly, background-image attributes seem to have issues. The print resolution is different from the size of the image. It's an odd effect. Here's an example:

I have:

div#print_header{
background-image:url(a200-pixel-square-image.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-attachment:top center;
width: 500px;
height: 500px;
}

<div id="print_header"></div>

In the screen display, the image is shown at 200 pixels square, with lots of room around it.

In print, however, the image is displayed bigger than its crop, so the right and bottom are cropped to the same crop as if it were a 200-pixel image.

Weird stuff.