¿Cómo puedo obligar a los navegadores a imprimir imágenes de fondo en CSS?

Esta pregunta se hizo antes pero la solución no es aplicable en mi caso. Quiero asegurarme de que se impriman ciertas imágenes de fondo porque son parte integral de la página. (No son imágenes directamente en la página porque hay varias que se utilizan como sprites CSS).

Otra solución para la misma pregunta sugiere usar list-style-image, que solo funciona si tiene una imagen diferente para cada ícono, no es posible utilizar sprites CSS.

Aparte de crear una página separada con los iconos en línea, ¿hay otra solución?

Tiene muy poco control sobre los métodos de impresión de un navegador. Como máximo, puede SUGERIR, pero si la configuración de impresión del navegador tiene "no imprimir imágenes de fondo", no hay nada que pueda hacer sin reescribir su página para convertir las imágenes de fondo en imágenes flotantes de "primer plano" que están detrás de otro contenido.

Con Chrome y Safari, puede agregar el estilo CSS -webkit-print-color-adjust: exact;al elemento para forzar la impresión del color de fondo y / o la imagen

Los navegadores, de forma predeterminada, tienen desactivada la opción de imprimir colores de fondo e imágenes. Puede agregar algunas líneas en CSS para evitar esto. Solo agrega:

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

Encontré una forma de imprimir la imagen de fondo con CSS. Depende un poco de cómo se distribuyan sus antecedentes, pero parece funcionar para mi aplicación.

Esencialmente, agrega @media printal final de su hoja de estilo y cambia ligeramente el fondo del cuerpo.

Ejemplo, si su CSS actual se ve así:

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

Al final de su hoja de estilo, agrega:

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

Esto agrega la imagen al cuerpo como una imagen de "primer plano", haciéndola imprimible. Es posible que deba agregar algo de CSS adicional para hacer el z-indexarchivo. Pero, de nuevo, depende de cómo se distribuya la página.

Esto funcionó para mí cuando no pude hacer que una imagen de encabezado se mostrara en la vista de impresión.

El siguiente código funciona bien para mí (al menos para Chrome).

También agregué algunos controles de orientación de margen y página (retrato, paisaje)

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

Asegúrese de utilizar el atributo! Important. Esto aumenta drásticamente la probabilidad de que sus estilos se conserven cuando se imprimen.

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

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

Como dijo @ ckpepper02, la opción body content: url funciona bien. Sin embargo, descubrí que si lo modifica ligeramente, puede usarlo para agregar una imagen de encabezado de tipo usando el pseudo elemento: before de la siguiente manera.

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

Eso deslizará la imagen en la parte superior de la página y, según mis pruebas limitadas, funciona en Chrome e IE9.

-hanz

Utilice psuedo-elementos. Si bien muchos navegadores ignorarán las imágenes de fondo, los psuedo-elementos con su contenido establecido en una imagen NO son técnicamente imágenes de fondo. A continuación, puede colocar la imagen de fondo aproximadamente donde debería haber ido la imagen (aunque no es tan fácil ni tan preciso como la imagen original).

Un inconveniente es que para que esto funcione en Chrome, debe especificar este comportamiento fuera de su consulta de medios impresos y luego hacerlo visible en el bloque de consultas de medios impresos. Entonces, algo como esto ...

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

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

El inconveniente es que la imagen a menudo se descargará en cargas de página normales, lo que agrega volumen innecesario. Puede evitarlo simplemente usando la misma imagen / ruta que ya usó para la imagen visible original.

está funcionando en Google Chrome cuando agrega! atributo importante a la imagen de fondo asegúrese de agregar el atributo primero y vuelva a intentarlo, puede hacerlo así

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

}

Puede utilizar bordes para colores fijos.

 borderTop: solid 15px black;

y para el fondo degradado puedes 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 propone una solución elegante, utilizando una viñeta personalizada en lugar de una imagen de fondo:

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

Incluyendo esto dentro de un

@media print {
}

bloque, puedo reemplazar un logotipo blanco sobre transparente en la pantalla, renderizado como una imagen de fondo, con un logotipo negro sobre transparente para imprimir.

Puedes hacer algunos trucos como ese:

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

En la etiqueta del cuerpo:

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