This solution applies to a header pair defined as follows:

<div id="header-normal">...</div><img id="header-printer-version" src="/location/to/your/print-header.jpg" width="0" height="0" />


You can specify your different media stylesheets as follows:

<link rel="stylesheet" href="screen-style.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="print-style.css" type="text/css" media="print" />



screen-style.css
==========

#header-normal {
  display: block;
  width: 800px;
  height: 220px;
  background: url(/location/to/your/normal-header.jpg) no-repeat;
}

#header-printer-version {
  float: left;
  width: 0px;
  height: 0px;
  visibility: hidden;
}

print-style.css
================

#header-normal {
  display: none;
}

#header-printer-version {
  float: left;
  width: 600px;
  height: 150px;
  visibility: visible;
}

This solution applies to a header pair defined as follows:

<div id="header-normal">...</div><img id="header-printer-version" src="/location/to/your/print-header.jpg" width="0" height="0" />


You can specify your different media stylesheets as follows:

<link rel="stylesheet" href="screen-style.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="print-style.css" type="text/css" media="print" />



screen-style.css
==========

#header-normal {
  display: block;
  width: 800px;
  height: 220px;
  background: url(/location/to/your/normal-header.jpg) no-repeat;
}

#header-printer-version {
  width: 0px;
  height: 0px;
  visibility: hidden;
}

print-style.css
================

#header-normal {
  display: none;
}

#header-printer-version {
  float: left;
  width: 600px;
  height: 150px;
  visibility: visible;
}

screen-style.css
==========

#header-normal {
  display: block;
  width: 800px;
  height: 220px;
  background: url(/location/to/your/normal-header.jpg) no-repeat;
}

#header-printer-version {
  width: 0px;
  height: 0px;
  visibility: hidden;
}

print-style.css
================

#header-normal {
  display: none;
}

#header-printer-version {
  float: left;
  width: 600px;
  height: 150px;
  visibility: visible;
}

When developing a website, an important consideration is accessibility on other media, including the medium of print. However, the printing engines of most browsers render content differently to allow for simple printed pages. One of the most notable differences is the omission of background images by default in modern browsers' print output. Background images are commonly used for header elements, which causes missing branding in the resulting printed pages.
 
One option defined in this snippet is to add markup after your normal header for a 0 pixel by 0 pixel `<img>` element (your print version header), and then style the two headers as invisible and visible based upon the stylesheet medium. So when you're viewing the screen version of the page the normal header will be visible and the print header will be an invisible element with a width and height of 0 pixels. With the print version of the page the normal header will not be displayed at all and the print header will be a visible element that is floated and correctly sized.

This solution has been tested to work in:

*  Microsoft Internet Explorer 6, 7, 8
*  Mozilla Firefox 3.6
*  Google Chrome 5
*  Apple Safari 4
*  Opera 10

CSS: Printer Friendly Header Visibility Styles

css, header, image, style

CSS