Comment puis-je forcer les navigateurs à imprimer des images de fond en CSS?

Cette question a déjà été posée mais la solution n’est pas applicable dans mon cas. Je veux m’assurer que certaines images de fond sont imprimées car elles font partie intégrante de la page. (Ce ne sont pas des images directement dans la page car plusieurs d’entre elles sont utilisées comme sprites CSS.)

Une autre solution sur cette même question suggère d’utiliser list-style-image , qui ne fonctionne que si vous avez une image différente pour chaque icône, aucun sprite CSS possible.

En plus de créer une page séparée avec les icons en ligne, existe-t-il une autre solution?

Vous avez très peu de contrôle sur les méthodes d’impression d’un navigateur. Tout au plus, vous pouvez SUGGÉRER, mais si les parameters d’impression du navigateur n’impriment pas les images d’arrière-plan, vous ne pouvez rien faire sans réécrire votre page pour transformer les images d’arrière-plan en images de premier plan flottantes.

Avec Chrome et Safari, vous pouvez append le style CSS -webkit-print-color-adjust: exact; à l’élément pour forcer imprimer la couleur de fond et / ou l’image

J’ai trouvé un moyen d’imprimer l’image de fond avec CSS. C’est un peu dépendant de la configuration de vos antécédents, mais cela semble fonctionner pour mon application.

Essentiellement, vous ajoutez l’ @media print à la fin de votre feuille de style et modifiez légèrement l’arrière-plan du corps.

Exemple, si votre CSS actuel ressemble à ceci:

 body { background:url(images/mybg.png) no-repeat; } 

À la fin de votre feuille de style, vous ajoutez:

 @media print { body { content:url(images/mybg.png); } } 

Cela ajoute l’image au corps comme une image “de premier plan”, la rendant ainsi imprimable. Vous devrez peut-être append des CSS supplémentaires pour que le z-index correct. Mais encore une fois, c’est à la façon dont votre page est présentée.

Cela a fonctionné pour moi quand je ne pouvais pas obtenir une image d’en-tête à afficher dans la vue d’impression.

Les navigateurs, par défaut, ont la possibilité d’imprimer des couleurs d’arrière-plan et des images désactivées. Vous pouvez append des lignes dans CSS pour éviter cela. Ajoutez simplement:

 * { -webkit-print-color-adjust: exact !important; /* Chrome, Safari */ color-adjust: exact !important; /*Firefox*/ } 

Le code ci-dessous fonctionne bien pour moi (au moins pour Chrome).

J’ai également ajouté des contrôles d’orientation des pages et des marges (portrait, paysage)