Per poder imprimir colors de fons cal que l'usuari activi l'opció del navegador, però no passa el mateix amb els border.

Aprofitant aquest fet es pot mostrar un border superposat a un text donant l'efecte d'un color de fons que sempre s'imprimirà.

Aquesta solució permet imprimir colors de fons mitjançant CSS Print tot i que l'usuari tingui inhabilitada l'opció d'imprimir-los. Millor no abusar-ne.

Donat un XHTML tal com:

<div>
   <h2>Títol</h2>
   <p>Un paràgraf...</p>
</div>

Només cal donar un border superior al div i un margin superior negatiu al títol.

div {
   border-top: 24pt solid #999;
}
h2 {
   font-size: 18pt;
   margin: -12pt 0 0 5pt;
   line-height: 0;
}

El valor del margin-top serà la meitat del border-top sempre que el line-height sigui 0. (Aquesta proporció no es compleix en Opera).

Exemple de la tècnica de background imprimibles.

En Internet Explorer si el contingut de la caixa amb el marge negatiu és una imatge en línia falla el desplaçament. Per arreglar-ho cal posar un display: block a la imatge. És a dir:

<div>
   <h2><img src="imatge" alt="Títol"/></h2>
   <p>Un paràgraf...</p>
</div>

div {
   border-top: 24pt solid #999;
}
h2 {
   font-size: 18pt;
   margin: -12pt 0 0 5pt;
   line-height: 0;
}
h2 img {
   display: block;
}

Gràcies a en Ramon Vilar per detectar que no rutllava en IE aquest cas.

A més a més, pot ser que apareguin problemes d'apilament si la caixa desplaçada és inline. Llavors caldrà modificar l'apilament.

Recursos relacionats

• Printing CSS background images