«
»

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.

This entry was posted by Jesper Rønn-Jensen on Tuesday, September 29th, 2009 at 11:08 (GMT-1) and is filed under Code, CSS, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

8 Responses to “Print CSS Background Logo Hack”

  1. Wayne State Web Communications Blog » Blog Archive » [Friday Links] The Edition Says:
    October 3rd, 2009 at 15:01 (GMT-1)

    [...] Print CSS Background Logo Hack [...]

  2. Steve Says:
    October 3rd, 2009 at 23:00 (GMT-1)

    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:
    October 5th, 2009 at 08:42 (GMT-1)

    I second Steve. It’s full of spam.

  4. B B Kent Says:
    February 5th, 2010 at 13:18 (GMT-1)

    Thanks Jesper, a useful tip.

  5. Hans-Joachim Reinecke Says:
    March 5th, 2010 at 19:39 (GMT-1)

    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:
    June 15th, 2011 at 05:43 (GMT-1)

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

  7. Dave Says:
    July 31st, 2011 at 20:12 (GMT-1)

    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. asp.net Says:
    October 18th, 2011 at 02:37 (GMT-1)

    asp.net…

    [...]justaddwater.dk | Print CSS Background Logo Hack[...]…

Leave a Reply