«
»

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 (UTC) and is filed under CSS, Code, 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.

5 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 (UTC)

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

  2. Steve Says:
    October 3rd, 2009 at 23:00 (UTC)

    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 (UTC)

    I second Steve. It’s full of spam.

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

    Thanks Jesper, a useful tip.

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

    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

Leave a Reply