Problem with printing background images

I have recently wasted almost two hours trying to figure out why some HTML based report wont display logo in its header. I am quite sure this will make someone else’s life easier, so I am sharing it. The problem is that most browsers ignore background-image and background-color. So whatever I did I could only set border, width, heights etc but not the image. At first I thought the problem was in wrong path to background image.  It wasn’t but I found that it is not possible (at least as I know) to inspect DOM elements in print-preview. Something like Firebug but for print-preview. There is nothing like that.

How do you print images without using background-image?

Simply return to the good old <img> tag 🙂

Or if you need two different images for screen and print version then you have add them both to your page and set display via css. Like this.

<div class="header">
  <img src="bigImage.jpg" class="defaultImage"/>
  <img src="smallImage.jpg" class="printThisImage"/>
</div>

@media screen {
  .defaultImage {
    display:block;
  }

  .printThisImage {
    display:none;
  }
}

@media print {
  .defaultImage {
    display:none;
  }

  .printThisImage {
    display:block;
  }
}

Click here to see the demo.