Stampare un logo impostato come sfondo nei CSS

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:

#header {
  display: list-item;
  list-style-image: url(logo.png);
  list-style-position: inside;
	margin: 0 !important;
  padding: 0 !important;
	height: 50pt;
}

Per ulteriori approfondimenti e piccole varianti nel codice, disseppellisco dai miei bookmark il link al vecchio post di WebGraphics in cui trovai per la prima volta menzione della tecnica, aggiungendo il riferimento all’esempio.

àˆ anche probabile che nel frattempo, su Firefox 3.0 e successivi per Windows, sia stato risolto il bug citato in questo post sempre di WG e per cui ad un’anteprima corretta faceva seguito su carta un risultato tutt’altro che apprezzabile nella stampa dell’immagine.

Per chiudere, tra i commenti al post originale di WG, ce n’è uno che accenna alla possibilità  di usare i contenuti generati nel CSS per la stampa per ottenere lo stesso risultato. Certo, a quel punto perdiamo le vecchie versioni di Explorer e a quel punto le cose si complicano… :) Comunque, per un approfondimento sull’uso del generated content per l’image replacement rimando all’articolo Image Replacement alternativo di Alessandro Fulciniti.