Cómo obtener una imagen de fondo para imprimir usando css?

Estoy usando el paquete ASP Net Sprites para crear CSS Sprites en mi sitio web.

Está funcionando, pero las imágenes que genera no aparecen cuando se imprimen.

El código generado en el nivel de HTML es:

 

¿Cómo puedo hacer que aparezca la imagen del logotipo cuando un usuario imprime la página?

He intentado agregar esto en mi hoja de estilo de print.css, pero no funcionó:

 #siteLogo { visibility: visible; } 

El print.css está funcionando bien y está formateando la página como quiero para otros elementos en la página. Mi único problema es que no puedo mostrar la imagen del logotipo del sitio cuando se imprime.

Depende del usuario y la configuración de su navegador imprimir o no imprimir imágenes de fondo. Para evitar confiar en eso, coloque las imágenes directamente en el HTML con una etiqueta real .

Para Chrome y Safari, puede agregar lo siguiente en su CSS:

 @media print { * {-webkit-print-color-adjust:exact;} } 

Desafortunadamente, para otros navegadores web, el usuario tiene que seleccionar manualmente la opción para imprimir imágenes de fondo (por ejemplo, para los usuarios con IE 9, 10 y 11, tienen que hacer clic en el ícono del engranaje -> Imprimir -> Configurar página y activar la opción )

Puede tener una consulta de medios propia para imprimir y usar: antes del selector con el atributo “contenido”.

Coloque esto en la consulta de medios e insertará la imagen cuando intente imprimir:

 p:before { content: url(images/quote.gif); } 

http://www.htmldog.com/reference/cssproperties/content/

Su documento principal, importará 2 hojas de estilo, 1 para la pantalla y otra para la impresora. Puede ajustar con precisión la configuración de medios que necesita.

  

      

Aquí está la imagen de fondo llamada en su archivo css principal utilizado en los navegadores.

 .bg { background: url("http://fpoimg.com/250x250") top left no-repeat; width:250px; height: 250px; } 

Y su truco de impresión utilizado por los navegadores cuando los usuarios inician el diálogo de impresión. De modo que puede agregar la clase de impresión a su div y hacer que se imprima, o eliminarla si es necesario.

 .bg.print { display: list-item; list-style-image: url("http://fpoimg.com/250x250"); list-style-position: inside; } 

Nota: También puede usar la regla @media en lugar de importar archivos si desea evitar realizar una solicitud HTTP adicional.

referencia de: http://www.seifi.org/css/how-to-force-css-background-images-to-print-in-web-browsers.html

Está funcionando en Google Chrome cuando agrega el atributo importante a la imagen de fondo. Asegúrese de agregar primero el atributo y luego intente de nuevo, puede hacerlo así:

 .class-name { background: url('your-image.png') !important; } 

También puede usar estas útiles reglas de impresión y ponerlas al final del archivo css:

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

set media = “print”

  

Referencia

Si usa Internet Explorer, así es como lo hace:

  • Ve al menú ‘Herramientas’.
  • Haga clic en ‘Opciones de Internet’.
  • Haga clic en la pestaña ‘Avanzado’.
  • Controle el color e imágenes de fondo de impresión.
 
Hello, world.

Esto tiene sentido del CSS que publicó, también vea este sitio web: https://defuse.ca/force-print-background.htm

Prueba esto:

 @media print { body:before { content:url(http://192.168.0.11:8088/automation/img/mahyaA5.jpg); position: absolute; z-index: -1; } } 

Cuando intenta una impresión personalizada mediante la creación de formato de impresión directamente con el script java y si hay una etiqueta allí, no se imprimirá porque el navegador envía intensamente la solicitud a la impresora sin esperar a cargar la imagen en el caché. Así que, practique, agregue la imagen que desea imprimir en la página html y haga que su visibilidad sea falsa.