Print-Stylesheets und background-image

Bei clickpress wird auf standardkonformes Markup geachtet und Bilder per Image-Replacement ins CSS gepackt. Nur leider (oder zum Glück?) ignorieren die Druck-Dialoge der Browser das CSS-Attribut background-image:url(‚image.jpg‘).

Auf meiner Suche im Internet nach einer Lösung fand ich einen Beitrag von Andreas Bovens, der via Listen-Element das Problem fixt. Hier nun die deutsche Version:

Nehmen wir an, wir haben einen h1-tag mit der id „title“.

#ti\tle {                                  /* 6. */
    display: list-item;                /* 1. */
    list-style-image: url(banner.jpg); /* 2. */
    list-style-position: inside;       /* 3. */
    letter-spacing: -1000em;           /* 4. */
    font-size: 1pt;                    /* 5. */
    color: #fff;                       /* 5. */
}

1. Das h1-(Inline-)Element wird in ein Listen-Element gewandelt
2. Als Listen-Image wird das Bild eingebunden.
3. Firefox hätte gern das inside
4. Per Malarkey’s Image Replacement (MIR) wird der eigentliche Text zwischen den h1-tags versteckt.
5. Da MIR nicht in Opera funktioniert, wird die Schriftgröße auch 1 pt reduziert und weiß eingefärbt. Mit Operas Standard-Printeinstellungen wird der Text nun unsichtbar.
6. Da der IE 5 und IE 5.5 list-style-image nicht verstehen, schließen wir diese Browser kurzerhand per Escaping-Hack aus.