Force printing CSS background images

I came across this problem for my companies website. On the front page they have a javascript random image that changes with the page refresh. When you go to print this front page, the image, which is defined in CSS (as well as several other images) do not print UNLESS the user has selected an option to include the background images in their print.

So what I am looking to do, is that when an end user with unkown browser (most likely IE) prints the front page of the site, the random image, and the background images defined in CSS are printed as well.

I have been messing around with @media: print with little or no succes at the moment. I have read about using activex controlers but there are security issues there. Also, a possible generate PDF document on print, but if the end user DOESNT have it installed, thats a problem as well.

I don't want to get into any morality issues of "well the end user doesnt WANT to print the background image why force them?" or anything like that.

Any ideas on this?

Many (most) browsers don't bother printing background colours/images by default - don't force the user to go into the settings to change that option to the non-default one! Instead, how about modifying the way you do things so that a real image element is generated instead of a background image property? If it's just a page background, then I'd let the user make the decisions and you need to respect that.

my list of 'work arounds' are growing, however they all seem to have limitations. the latest is;

style type="text/css" media="print"> #ti\tle { display: list-item; list-style-image: url(banner.jpg); list-style-position: inside; letter-spacing: -1000em; font-size: 1pt; color: #fff; }

this would be used in say something like " <h1 id="title">hidden text</h1> "

really strange and only works in IE5.5+, FF1.0, etc.

does anyone know if it is possible to only allow landscape printing through CSS? I found one bit of code for IE 5.5+ but nothing on the mozzila side.

IE code;

<style type="text/css" media="print"> div.page { writing-mode: tb-rl; height: 80%; margin: 10% 0%; } </style>

info from

http://web.tampabay.rr.com/bmerkey/e...cape-test.html

so i have been trying to accomplish the same thing for mozila, but no luck so far. any ideas?

Just put the same image ontop of the background image and hide it (with 'display: none' in CSS).
Then, in your print-CSS just change it to 'display: block'. Should work.

Or - if it's possible - change the background image to a normal image.

im not sure that will work for me. i have about 15 random images being placed in the dive tag (with each page refresh a new image apears), which is done with javascript. i figure i pretty much have to revamp my page, and remove some layer elements that are blocking me at the moment.

but the new issue im trying to figure out is the landscap printing. im pretty sure the answer is somewhere between @page and @print or something. just cant get it working yet for FF.

<img src="<?php ?>" alt="" />
When its parsed, it will put the images/name.gif in there, find a random script and try that.

Why not just have the random image as an image rather than a background? :P