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

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

Encontrei uma forma de imprimir a imagem de fundo com o CSS. É um pouco dependente de como o seu passado é definido, mas parece funcionar para a minha aplicação.

Exemplo, se o seu CSS actual se parece com isto:

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

No final da tua folha de estilo, adicionas:

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

Isto adiciona a imagem ao corpo como uma imagem "principal", tornando-a assim imprimível. Você pode ser necessário adicionar alguns CSS adicionais para tornar o z-index adequado. Mas, mais uma vez, depende de como a sua página está colocada.

Isto funcionou para mim Quando eu não consegui obter uma imagem de cabeçalho para aparecer na vista impressa.

Os navegadores, por omissão, têm a sua opção de imprimir o fundo-cores e imagens desligadas. 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*/
}

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

<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 importante. Isso aumenta drasticamente a probabilidade de seus estilos serem retidos quando impressos.

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

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

Como @ckpepper02 disse, a opção conteúdo do corpo:url funciona bem. Eu descobri no entanto que se você modificá-lo ligeiramente você pode apenas usá-lo para adicionar uma imagem de cabeçalho de tipos usando o :antes do pseudo elemento como se segue.

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

-hanz

Usar elementos psuedo. Enquanto muitos navegadores irão ignorar imagens de fundo, psuedo-elementos com o seu conteúdo definido para 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 precisa como a imagem original).

Uma desvantagem é que para isto funcionar no Chrome, você precisa especificar este comportamento fora da sua pesquisa de mídia de impressão, e então torná-lo visível na pesquisa de mídia de impressão bloco. 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 será baixada frequentemente nas cargas normais da página, adicionando quantidades desnecessárias. Você pode evitar isso usando apenas a mesma imagem / caminho que você já tinha usado para a imagem original, visível.

Está a funcionar no google chrome quando adicionar !atributo importante para a imagem de fundo certifique-se de adicionar atributo primeiro e tentar de novo, você pode fazê-lo assim

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

}

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

Na marca corporal:

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