Lo scenario è il seguente: nell'header di una pagina abbiamo inserito il logo del sito/azienda/etc, ma lo abbiamo fatto impostandolo come immagine di sfondo di un elemento h1 (è più o meno quanto accade su questo blog) e non utilizzando il tag img nel codice HTML.
Quando si stampa la pagina, dal momento che di default i browser non stampano (giustamente, aggiungo) gli sfondi, il logo non compare. Come conciliare? Come continuare ad usare la nostra amata tecnica di image replacement ottenendo su carta l'immagine del logo?
A beneficio di quanti non la conoscessero, segnalo una tecnica che che mi è tornata in mente ieri trovandola sul blog di Jesper Rà¸nn-Jensen.
Si basa sulla trasformazione dell'elemento che contiene il logo come sfondo in list-item attraverso la proprietà display. L'immagine viene poi applicata attraverso l'uso di list-style-image. Nel CSS per la stampa, posto che l'immagine del logo sia associata ad un elemento con id #header, useremo questo codice:
Per ulteriori approfondimenti e piccole varianti nel codice, disseppellisco dai miei bookmark il link al vecchio post di WebGraphics esempio
àˆ anche probabile che nel frattempo, su Firefox 3.0 e successivi per Windows, sia stato risolto il bug citato in questo post
Per chiudere, tra i commenti perdiamo Image Replacement alternativo
