You seem to be on the right track, Oliver.

Matthew's response regarding targeting media types is also helpful.  One of the 
implementations I've used before is described below.

Note that:
- The print-only version of the logo is the near-last element in the page.  I 
assume that someone will read all (or most) of the document before printing, 
giving the browser time to download the print-only [hidden] inline image.
- Both images are requested at page load, not at page print
- Background image printing is unlikely to be enabled by default on a user's 
browser, hence the use of inline images
- When printing, the screen version of the logo is entirely hidden, and the 
print logo is positioned absolutely on the top left of the page.
- ContentWrapper is given a top margin related to the height of the printable 
logo (preventing nasty overlaps)
- Both images are downloaded in the same page request.
- I do not regard this as a duplication of content - a print-optimised version 
of a logo may have very different requirements from a screen-optimised version 
of a logo.
- Similar approaches should work for other @media types
- CSS-less browsers will expose both versions of the logo - one at the top of 
the page, one at the bottom (not a deal breaker, IMO).

<link type="text/css" rel="stylesheet" media="print" href="print.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="screen.css"/>
<img id="headerLogo" ... />
<div id="contentWrapper">
<img id="printLogo" height="80px" width="120px" .../>


#printLogo {
        position: absolute;
      left: 0;
      top: 0;

#headerLogo {
        display: none;

#printLogo {

#contentWrapper {
        margin-top: 80px;

Good luck!

- Gordon

> I have been asked to place a different header image in my HTML templates
> specifically for print (only shows when printed and replaces usual header).
> I would like to know if this is deemed acceptable use of CSS....AND if a
> hard-coded image has to be downloaded on page load or page print??
> eg.
> <div id="print-header" style="display:none;">
>    <img src="img/elements/print-header.jpg" alt="blah blah" width="600"
> height="254" />
> </div>
> <div id="header">
>    <img src="img/elements/normal-header.jpg" alt="blah blah" width="800"
> height="300" />
> </div>
> .print-header {display:block!important}
This duplication of content is unnecessary and would be rather
difficult to maintain in the long term.
.The issue has been dealt with  in

 Use one element id in a document for one element e.g.

<div id="header">

and then define it differently for  different media as per examples in
that link.n

 @media print {
   #header { font-size: 10pt }
 @media screen {
   #header { font-size: 13px }
 @media screen, print {
   #header { line-height: 1.2 }

This method achieves independence of data (web page content) from
design/style (whether it is screen, print or other media type).



List Guidelines:


Finance Australian Business Number (ABN):   61 970 632 495       
Finance Web Site:   


This transmission is intended only for the use of the addressee and may contain 
confidential or legally privileged information. If you are not the intended 
recipient, you are notified that any use or dissemination of this communication 
is strictly prohibited. 
If you have received this transmission in error, please notify us immediately 
by telephone on 61-2-6215-2222 and delete all copies of this transmission 
together with any attachments. 
If responding to this email, please send to the appropriate person using the 


List Guidelines:

Reply via email to