CSS designs won't print background images

October 10, 2005 3:14 PM

CSS question (sort of) : Printing web pages with background images.

I design/create websites and have recently been contracted for a company that has in the past used tables for web layouts. They were impressed with my experience in CSS/XHTML and my belief behind it for all the obvious reasons. It was a big part of why I was hired.

Unfortunately they like to print out websites to write on and make notes, etc and they want their clients to have this ability as well. Thing is, when designing with CSS all or most images are called about as background images through the stylesheet.

Thus when going to print the default for most browsers is to not print background images. I'm really unsure of how to solve this problem and am looking for any assistance. I've read as much as I could find and even according to alistaparts article on print style's it appears this isn't really going to work the way this company wants.

I setup their browser on one work station to print background images and that was ok. But they want their clients to be able to print without having to go through that.

Any solutions? If not, how do I approach this with my boss.

posted by freudianslipper to Computers & Internet (27 answers total)

Would the print-specific stylesheet not work?

The browser does ordinarily strip out background images, but perhaps the print stylesheet will override it?
posted by lychee at 3:28 PM on October 10, 2005

Response by poster: lychee, thanks but its the same thing. the print stylesheet allows you to control elements differently if printed. But it still calls images as background images which browsers don't like.

i did try that, but perhaps there is another way to utlize the print stylesheet to my advantage?
posted by freudianslipper at 3:32 PM on October 10, 2005

Have you tried setting the MEDIA type to the included stylesheet to "ALL" ? I've managed to preserve a number of different types of formatting during printing using that method.

You may also want to consider, instead of using a background image, of just using a document-sized DIV with just your background image with z-index of -1, as that's sure to print.
posted by thanotopsis at 3:42 PM on October 10, 2005

Response by poster: i've set the media type to screen for the regular viewing and print for the printing style. Having set to "all" but i dont know how that would work. I can give it a try I suppose.

the thing is, its not just a tiled background image. It's probably 8 to 10 images on average per page. And on some site there can be hundreds of pages. The current site i'm working on is small enough but taking screencaptures of everypage and a separate print style seems unneccessary and far too much work.
posted by freudianslipper at 3:52 PM on October 10, 2005

Response by poster: I suppose if there were a way to change the browsers settings or override them that would be perfect. Everything i've come across leads me to believe this isn't possible.
posted by freudianslipper at 3:54 PM on October 10, 2005

Best answer: Well, it looks like you can do change some simple IE print settings. Or there's an ActiveX script for IE as well. That really won't help with non-IE browsers or if the client has changed their security settings.
posted by lychee at 4:06 PM on October 10, 2005

Response by poster: ahhh yes thank you lychee this is on the right track. Although i read that using activex for these purposes opens up your browser to security issues, i'm not sure what those issues are.

But this is worthy of trying, especially since they do most of their testing on IE (gasp!). I know ;). I'm going to safely assume that the clients use IE as well, so as long as IE worked I'd be in good shape, even if it wasn't the best solution.

thank you! i'm still open to other ideas but i think activex is the only way to change the browser settings.
posted by freudianslipper at 4:16 PM on October 10, 2005

my first reaction is: don't try to control what you can't ever (really) control. It is reminiscent of those people who would try to stop you from downloading their images -- disabling right-click, etc etc, when the user-agent has already fetched the image and it is the users to do with what they want.

What is it about the images that makes you want them to print? If they are visual fluff, then tell your boss that print styles are about reading the content, not attempting to reproduce a screen-based medium in a print medium. If the images are content, then they should not be inserted via css, they should be images embedded via image tags in the html of the page (since the goal is separation of presentation and content, not text and non-text).

If it is an issue of branding (logos and such) you might need to adjust how much of the logo is an image and how much is background image. A tradeoff between maintainability and branding.

there are tons of articles on approaches to content/presentation separation, not fighting settings that you can't fight (user-agent settings like whether or not to print bg images, etc. etc.), the benefits of a print stylesheet vs. a "print-friendly" version. (mostly about user expectation, and preparing them for the fact that the print version will not look the screen version) alistapart has some of them, google for others. sorry, i am a lazy linkless guy this afternoon.
posted by misterbrandt at 4:30 PM on October 10, 2005

You can absolutely position the images in the elements they're the background on. You could automate that with JavaScript. There are probably a bunch of ways to do it.

But the reality is this is one of those times you should tell the client there's a reason they hired you. And your recommendation is not to waste other folks' toner. Browsers don't print background images because people don't want them to. Overriding that behavior because a business owner paid good money for a design is going to annoy 99% of the people who aren't working there. Clients need to get over the idea of "owning" a site. It's a way to present yourself to people. Why present yourself as an annoying sumbitch?
posted by yerfatma at 4:32 PM on October 10, 2005

Response by poster: misterbrandt, i know what your saying and I agree, but if you read my post i think you'll see that's not the issue. The issue is that my bosses need to print out my web designs in order to make notes/revisions/etc. it's how they work.

I would like nothing more than to create proper print styles for the sites I design for them. But I also like my job and want to please the people who pay me.

This is definitely not something I will do on my own web pages but if I have to I will compromise for work jobs.

Sidenote: most sites will not be so graphic heavy but this one in particular is, so when they went to print almost nothing showed up.

It's not a morality issue, perhaps I should have clarified.
posted by freudianslipper at 4:39 PM on October 10, 2005

Response by poster: I would like to ween them away from the darkside but seeing as how i'm 3 weeks into the job i'm not going to tell them how to run their business quite yet.
posted by freudianslipper at 4:40 PM on October 10, 2005

bosses need to print out my web designs in order to make notes/revisions/etc

Oh wow, that's a totally different thing. My apologies, freud dude. I did not get that from your original question. (although on re-read, maybe coulda been clearer).

How about some sort of screengrab app? Not that it's a solution for this, but I think that fogbugz has that built-in as a way to allow clients to report bugs, or at least i remember one of joel's articles talking about that as a feature.

Is this something that can be handled at the comp level? Or pseudo-comp? (i.e. take screenshots and make them available for download and printing?)
posted by misterbrandt at 5:19 PM on October 10, 2005

Or just tell your boss and his clients that if they want to be able to markup printouts of the style rather than just the content that they need to click a few option boxes in their print dialog box. Put together a help page for a couple of common browsers with some screenshots of how to do it.

or is that too much "telling them how to run their business" too?
posted by misterbrandt at 5:19 PM on October 10, 2005

Response by poster: lol, misterbrandt no apology needed. Your help is appreciated. I wish I could just do a simple print style that would work for them. However, I will be doing a print style for just printing the content of the site anyway. But yes the the screengrab app could be a solution.

I'll write up a bit anyway on how to mark this print option in each browser, good point.

thanks for the help, I knew there wouldn't be a perfect solution but at least it's something.
posted by freudianslipper at 5:25 PM on October 10, 2005

Best answer: I usually just put certain graphics that have to be printed in the page itself and hide them for screen display, but show them for print display.

For example, I tend to use a different header for the printed page that contains a company logo and usually the address, phone number, etc. that you find in a footer in the screen version, since you can't include a footer on every page of the print out.
posted by juiceCake at 7:26 PM on October 10, 2005

Response by poster: hey juice. good idea.

do you make use of display: none then for the normal style and make it visible in print? i was thinking of doin something like that. I guess i would just position it with CSS and put the actual img in the html...hmmm
posted by freudianslipper at 8:14 PM on October 10, 2005

Best answer: You can always generate a PDF on the fly and serve that when they click the print button. That would give you a lot more options.
posted by lockle at 9:04 PM on October 10, 2005

how about an annotation tool like iMarkup? (i can't tell if you can send the result?)
posted by misterbrandt at 9:06 PM on October 10, 2005

Second the PDF generation idea.
posted by Sharcho at 2:45 AM on October 11, 2005

do you make use of display: none then for the normal style and make it visible in print?

Yes.
posted by juiceCake at 6:53 AM on October 11, 2005

JuiceCake's approach is good, and it can be adapted for Hi-res printing.
posted by RobotHero at 10:38 AM on October 11, 2005

Best answer: Holy heck, there is indeed a PHP class for printing a PDF on the fly! That's a much better option than wasting time with separate formatting or trying to hack IE.
posted by macinchik at 4:14 PM on October 11, 2005

Thirding the PDF generation idea in theory although I've never actually got this working. Any software/script recommendations?
posted by blag at 4:23 PM on October 11, 2005

Heh. Good timing macinchik.
posted by blag at 4:23 PM on October 11, 2005

That's a much better option than wasting time with separate formatting

Separate formatting is largely the point however. Get rid of the menu items, sidebars, banners, etc. Wouldn't you still have to get rid of them in the PDF?

There would indeed be no point in a print style sheet if all you wanted to do is just print out what the web page looks like on screen.
posted by juiceCake at 9:17 PM on October 11, 2005

Best answer: Woops. Forgot to add, basically, you still have to take some time to develop separate formatting for the PDF version. However, of course, browser printing issues are avoided and pretty well everyone has a PDF plugin.

How does this process work? The user goes to print the document and a pdf is produced that is then automatically printed or do they have to ask it to print again?
posted by juiceCake at 9:20 PM on October 11, 2005

Response by poster: wow thanks guys, i'll have to delve into this deeper but i'm markin some more best answers here.

super :)
posted by freudianslipper at 8:29 AM on October 14, 2005