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

Veillez à utiliser l'attribut !important. Cela augmente considérablement la probabilité que vos styles soient conservés à l'impression.

#example1 {
    background:url(image.png) no-repeat !important;
}

#example2 {
    background-color: #123456 !important;
}

Answer 2

Comme l'a dit @ckpepper02, l'option body content:url fonctionne bien. J'ai cependant découvert que si vous la modifiez légèrement, vous pouvez l'utiliser pour ajouter une sorte d'image d'en-tête en utilisant le pseudo-élément :before comme suit.

@media print {
  body:before { content: url(img/printlogo.png);}
}

Cela permet de glisser l'image en haut de la page, et d'après mes tests limités, cela fonctionne dans Chrome et dans IE9.

-hanz

Answer 3

Utiliser des pseudo-éléments. Bien que de nombreux navigateurs ignorent les images d'arrière-plan, les psuedo-éléments dont le contenu est défini comme une image ne sont techniquement PAS des images d'arrière-plan. Vous pouvez alors positionner l'image d'arrière-plan à peu près à l'endroit où l'image aurait dû se trouver (bien que ce ne soit pas aussi facile ou précis que l'image d'origine).

L'inconvénient est que pour que cela fonctionne dans Chrome, vous devez spécifier ce comportement en dehors de votre requête de support d'impression, puis le rendre visible dans le bloc de requête de support d'impression. Donc, quelque chose comme ceci...

.image:before{
        visibility:hidden;
        position:absolute;
        content: url("your/image/path");
    }   

@media print {
.image{
   position:relative;
    }
    .image:before{
       visibility:visible;
       top:etc...
    }       
}

L'inconvénient est que l'image sera souvent téléchargée lors du chargement normal de la page, ce qui ajoute un volume inutile. Vous pouvez éviter cela en utilisant la même image/le même chemin que vous avez déjà utilisé pour l'image originale visible.

Answer 4

Cela fonctionne dans google chrome lorsque l'on ajoute l'attribut !important à l'image de fond assurez-vous d'ajouter l'attribut d'abord et essayez à nouveau, vous pouvez le faire comme ça

    .inputbg {
background: url('inputbg.png') !important;  

}

Answer 5

Les navigateurs désactivent par défaut l'option d'impression des couleurs d'arrière-plan et des images. 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 */
    color-adjust: exact !important;                 /*Firefox*/
}

Remarque : Cela ne fonctionne pas sur l'ensemble du corps, mais vous pouvez le spécifier pour un élément interne ou un élément div conteneur.