¿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 de ellas utilizadas como sprites CSS).

Otra solución sobre la misma pregunta sugiere usar list-style-image , que solo funciona si tiene una imagen diferente para cada icono, no hay sprites CSS posibles.

Además de crear una página separada con los icons en línea, ¿hay alguna otra solución?

Usted 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 “no imprime imágenes de fondo”, no hay nada que pueda hacer sin volver a escribir 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 puedes agregar el estilo CSS -webkit-print-color-adjust: exact; al elemento para forzar imprimir el color de fondo y / o la imagen

Encontré una manera de imprimir la imagen de fondo con CSS. Es un poco dependiente de cómo se presenta su fondo, pero parece funcionar para mi aplicación.

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

Ejemplo, si su CSS actual tiene este aspecto:

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

Al final de tu hoja de estilo, agregas:

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

Esto agrega la imagen al cuerpo como una imagen de “primer plano”, por lo que es imprimible. Es posible que necesite agregar algún CSS adicional para hacer que el z-index sea ​​el adecuado. Pero, de nuevo, depende de cómo se presenta su página.

Esto funcionó para mí cuando no pude obtener una imagen de encabezado para mostrar en la vista de impresión.

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

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

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

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

  

Asegúrese de usar 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 de contenido corporal: url funciona bien. Sin embargo, encontré que si lo modifica ligeramente, puede usarlo para agregar un tipo de imagen de encabezado 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, a partir de mis pruebas limitadas, funcionará en Chrome y en IE9.

-hanz

Use psuedo-elements. Si bien muchos navegadores ignoran las imágenes de fondo, los elementos psuedo con su contenido configurado en una imagen técnicamente NO son imágenes de fondo. A continuación, puede colocar la imagen de fondo aproximadamente donde debería haberse ido la imagen (aunque no es tan fácil o precisa como la imagen original).

Una desventaja 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 consulta de medios de impresión. 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áginas normales, lo que agrega volumen innecesario. Puede evitar eso simplemente usando la misma imagen / ruta que ya había utilizado para la imagen original y visible.

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

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

}