Background images seem to be hidden in Internet Explorer and Firefox when printing. Even when I add !important in the CSS, it still doesn't show.

I'm trying to make a certain background image show up when you print a page on one of my sites. But it only seems to work in Opera.

    Best I can think of is to just use a normal IMG tag, but trick the browser into displaying it as if it was a background image:

    <style type="text/css" media="all">
#bg {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -1;
}
</style>
<img id="bg" src="background_img.jpg">

      For what I want it for, having <img> will ruin it.

      I found this online: http://web-graphics.com/mtarchive/001703.php
      It works pretty well with Firefox, and it claims to work with IE6 and Opera8.5, but I can't get it to work for my versions (IE7 and Opera9.02). Works just fine for Firefox 2.0.0.3

      Would you know any "tweeks" to the CSS on that page to make it work with IE7 (I'm not too concerned with it working for Opera9)

        I saw that too, but didn't know if it would work for you.

        I'm not CSS expert, nor do I have IE7 installed to play with, so I'm afraid I can't help you out much! 🙁

          Ok I finally got it to work with the current versions of all 3 major browsers 🙂

            For the sake of others searching in the future, and to satisfy my own curiosity, would you mind posting your final solution?

              Basically, I used a <div> with a non-breaking space. (did work when I used <h1> like they had in the example, and I needed something inbetween, so I used &nbsp; )

              .npa {
	display: list-item;
	list-style-image: url('/images/npa.png');
	list-style-position: inside;
	letter-spacing: -1000em;
	font-size: 1pt;
}
              <div class='npa'>&nbsp;</div>

              And the result: http://img59.imageshack.us/img59/1638/untitledzf2.png

              I could have just used text, but I didn't want it to show up if CSS is disabled (since you're only supposed to see it if you print the page).
              And IE doesn't support the :before or :after in CSS2, so I couldn't use CSS generated text.

                Write a Reply...