Como posso forçar os navegadores a imprimir imagens de fundo em CSS?

Esta pergunta foi feita antes, mas a solução não é aplicável no meu caso. Quero ter certeza de que certas imagens de fundo são impressas porque são parte integrante da página. (Eles não são imagens diretamente na página porque há vários deles sendo usados ​​como sprites CSS.)

Outra solução para a mesma questão sugere o uso list-style-image, que só funciona se você tiver uma imagem diferente para cada ícone, sem CSS sprites possíveis.

Além de criar uma página separada com os ícones embutidos, existe outra solução?

Você tem muito pouco controle sobre os métodos de impressão de um navegador. No máximo, você pode SUGERIR, mas se as configurações de impressão do navegador tiverem "não imprimir imagens de fundo", não há nada que você possa fazer sem reescrever sua página para transformar as imagens de fundo em imagens flutuantes de "primeiro plano" que por acaso estão atrás de outro conteúdo.

Com o Chrome e Safari você pode adicionar o estilo CSS -webkit-print-color-adjust: exact;ao elemento para forçar a impressão da cor e / ou imagem de fundo

Os navegadores, por padrão, têm a opção de imprimir cores de fundo e imagens desativadas. Você pode adicionar algumas linhas em CSS para contornar isso. Basta adicionar:

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

Encontrei uma maneira de imprimir a imagem de fundo com CSS. Depende um pouco de como seu plano de fundo está disposto, mas parece funcionar para meu aplicativo.

Essencialmente, você adiciona o @media print ao final de sua folha de estilo e altera ligeiramente o fundo do corpo.

Exemplo, se o seu CSS atual for assim:

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

No final da folha de estilo, você adiciona:

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

Isso adiciona a imagem ao corpo como uma imagem de "primeiro plano", tornando-a imprimível. Você pode precisar adicionar algum CSS adicional para fazer o z-indexapropriado. Mas, novamente, depende de como sua página é apresentada.

Isso funcionou para mim quando eu não conseguia fazer uma imagem de cabeçalho aparecer na visualização de impressão.

O código abaixo funciona bem para mim (pelo menos para o Chrome).

Também adicionei alguns controles de margem e orientação de página. (Retrato, paisagem)

<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>

Certifique-se de usar o atributo! Important. Isso aumenta drasticamente a probabilidade de seus estilos serem mantidos quando impressos.

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

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

Como @ ckpepper02 disse, a opção body content: url funciona bem. No entanto, descobri que, se você modificá-lo um pouco, poderá apenas usá-lo para adicionar uma imagem de cabeçalho usando o pseudo elemento: before, como segue.

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

Isso deslizará a imagem no topo da página e, pelo meu teste limitado, funciona no Chrome e no IE9

-hanz

Use elementos psuedo. Embora muitos navegadores ignorem as imagens de fundo, os elementos psuedo com seu conteúdo definido como uma imagem NÃO são tecnicamente imagens de fundo. Você pode então posicionar a imagem de fundo aproximadamente onde a imagem deveria ter ido (embora não seja tão fácil ou preciso quanto a imagem original).

Uma desvantagem é que, para que isso funcione no Chrome, você precisa especificar esse comportamento fora da consulta de mídia de impressão e torná-lo visível no bloco de consulta de mídia de impressão. Então, algo assim ...

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

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

A desvantagem é que a imagem geralmente será baixada em carregamentos de página normais, adicionando volume desnecessário. Você pode evitar isso usando apenas a mesma imagem / caminho que já usou para a imagem visível original.

está funcionando no google chrome quando você adiciona! atributo importante à imagem de plano de fundo, certifique-se de adicionar o atributo primeiro e tente novamente, você pode fazer assim

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

}

Você pode usar bordas para cores fixas.

 borderTop: solid 15px black;

e para o fundo gradiente você pode usar:

    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 propõe uma solução elegante, usando um marcador personalizado no lugar de uma imagem de fundo:

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

Incluindo isso em um

@media print {
}

bloco, sou capaz de substituir um logotipo branco sobre transparente na tela, renderizado como uma imagem de fundo, por um logotipo preto sobre transparente para impressão.

Você pode fazer alguns truques como este:

<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>

No corpo da tag:

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