Print CSS Background Logo Hack

I learned this nice little hack to bypass the standard browser setting that normally prevents background images from being printed.

The hack makes use of converting the background-image to a list item with an image.

/* Hack, to trick the browser to print another logo 
   Unfortunetaly, Firefox on Windows doesn't show logo on print 
    — see Mozilla bug 133490 for further details */
#header {
  display: list-item; 
  list-style-image: url(../images/logo_print.gif); 
  list-style-position: inside;
	margin: 0 !important;
  padding: 0 !important;
	height: 50pt;

This way, you don’t have to fall back to inserting an image tag in your HTML for the logo. Instead, just have an a element that contains the corporate logo text, and nothing all.

8 Responses to “Print CSS Background Logo Hack”

  1. Wayne State Web Communications Blog » Blog Archive » [Friday Links] The Edition Says:

    […] Print CSS Background Logo Hack […]

  2. Steve Says:

    Have you seen your rss feed lately?
    It has 50 links to Viagra sites. I am not sure if this is on purpose or your site has been hacked.

  3. KMB Says:

    I second Steve. It’s full of spam.

  4. B B Kent Says:

    Thanks Jesper, a useful tip.

  5. Hans-Joachim Reinecke Says:

    Mange Tak, Japser,
    solved a bad problem easily because I wanted to include a small forrest picture at the printouts and got collisions with our div structure.
    Greetings to Danmark where I spent my holidays near Hvide Sande several times by-and-by in the last century.
    Hans-Joachim from Regensburg, Tyskland

  6. print css hack for background images | picas to pixels Says:

    […] Thank you Jesper Rønn-Jensen! […]

  7. Dave Says:

    Thanks for this, when you think about it it is so simple but before reading your solution I was pulling my hair out trying to have a basic image in the print css swopping out the embedded image from the webpage.

    Thanks again!

  8. Says:…

    […] | Print CSS Background Logo Hack[…]…