Comment forcer les navigateurs à imprimer les images d'arrière-plan en CSS ?

Question

Cette question a été demandée avant mais la solution n'est pas applicable dans mon cas. Je veux m'assurer que certaines images d'arrière-plan sont imprimées parce qu'elles font partie intégrante de la page. (Il ne s'agit pas d'images directement présentes dans la page, car plusieurs d'entre elles sont utilisées en tant que sprites CSS).

Une autre solution à 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 n'étant possible.

Outre la création d'une page séparée avec les icônes en ligne, existe-t-il une autre solution ?

Answer 1

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

Answer 2

Les navigateurs, par défaut, ont l'option d'imprimer background-color et les images désactivées. Vous pouvez ajouter quelques lignes dans le CSS pour contourner ce problème. Il suffit d'ajouter :

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari 6 – 15.3, Edge */
    color-adjust: exact !important;                 /* Firefox 48 – 96 */
    print-color-adjust: exact !important;           /* Firefox 97+, Safari 15.4+ */
}

Answer 3

J'ai trouvé un moyen d'imprimer l'image de fond avec CSS. Cela dépend un peu de la façon dont votre arrière-plan est disposé, mais cela semble fonctionner pour mon application.

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

Par exemple, si votre CSS actuel ressemble à ceci :

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

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

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

L'image est ainsi ajoutée au corps en tant qu'image de premier plan, ce qui la rend imprimable. Il se peut que vous deviez ajouter quelques feuilles de style CSS supplémentaires pour que l'image soit imprimable. z-index propre. Mais là encore, tout dépend de la façon dont votre page est présentée.

Cela m'a permis d'éviter qu'une image d'en-tête ne s'affiche à l'impression.

Answer 4

Vous avez très peu de contrôle sur les méthodes d'impression d'un navigateur. Vous pouvez tout au plus SUGGÉRER, mais si les paramètres d'impression du navigateur indiquent "ne pas imprimer 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 flottantes de "premier plan" qui se trouvent derrière d'autres contenus.

Answer 5

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

J'ai également ajouté des contrôles de marge et d'orientation de la page (portrait, paysage).

<style type="text/css" media="print">
@media print {
  body {-webkit-print-color-adjust: exact;}
}
@page {
    size:A4 landscape;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin: 0;
    -webkit-print-color-adjust: exact;
}
</style>