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

Cette question a été posée auparavant mais la solution n'est pas applicable dans mon cas. Je veux m'assurer que certaines images d'arrière-plan 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 icônes 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 paramètres d'impression du navigateur ont "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.

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 d'arrière-plan et / ou de l'image

Les navigateurs, par défaut, ont leur option pour imprimer les couleurs d'arrière-plan et les images désactivées. Vous pouvez ajouter quelques lignes en CSS pour contourner cela. Il suffit d'ajouter:

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

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 présenté, 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.

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 en tant qu'image «de premier plan», la rendant ainsi imprimable. Vous devrez peut-être ajouter du CSS supplémentaire pour faire le z-indexbon. Mais encore une fois, cela dépend de la présentation de votre page.

Cela a fonctionné pour moi lorsque je ne pouvais pas afficher une image d'en-tête en mode d'impression.

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

J'ai également ajouté des commandes 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>

Assurez-vous d'utiliser l'attribut! Important. Cela augmente considérablement la probabilité que vos styles soient conservés lors de l'impression.

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

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

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

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

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

-merci

Utilisez des éléments psuedo. Alors que de nombreux navigateurs ignorent les images d'arrière-plan, les éléments psuedo avec leur contenu défini sur une image ne sont techniquement PAS des images d'arrière-plan. Vous pouvez ensuite positionner l'image d'arrière-plan à peu près là où l'image aurait dû aller (bien que ce ne soit pas aussi facile ou précis que l'image d'origine).

Un inconvénient est que pour que cela fonctionne dans Chrome, vous devez spécifier ce comportement en dehors de votre requête de média imprimé, puis le rendre visible dans le bloc de requête de média imprimé. Alors, quelque chose comme ça ...

.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 des chargements de page normaux, ajoutant du volume inutile. Vous pouvez éviter cela en utilisant simplement la même image / chemin que vous avez déjà utilisé pour l'image originale visible.

cela fonctionne dans google chrome lorsque vous ajoutez! attribut important à l'image d'arrière-plan assurez-vous d'ajouter d'abord un attribut et réessayez, vous pouvez le faire comme ça

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

}

Vous pouvez utiliser des bordures pour des couleurs fixes.

 borderTop: solid 15px black;

et pour le fond dégradé, vous pouvez utiliser:

    box-sizing: border-box;
    border-style: solid;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-image: linear-gradient(to right, red, blue) 100%;
    border-image-slice: 1;
    border-width: 18px;

https://gist.github.com/danomanion/6175687 propose une solution élégante, utilisant une puce personnalisée à la place d'une image de fond:

   a.logo {
     display: list-item;
     list-style-image: url("../images/desired-background.png");
     list-style-position: inside;
   }

En l'incluant dans un

@media print {
}

bloc, je peux remplacer un logo blanc sur transparent à l'écran, rendu comme image d'arrière-plan, par un logo noir sur transparent pour l'impression.

Vous pouvez faire quelques trucs comme ça:

<style>
    @page {
        size: 21cm 29.7cm;
        size: landscape
        /*margin: 30mm 45mm 30mm 45mm;*/

    }
    .whater{
        opacity: 0.05;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 9999;
    }
</style>

Dans le body tag:

<img src="YOUR IMAGE URL" class="whater"/>