I have this html and css code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Recibo</title>
<style>
.recibo
{
width: 350px;
height: 500px;
padding: 5px 4px;
margin-left: 5px;
margin-right: 5px;
background-image: url(recibo.jpg);
display: inline-block;
}
.img_logo
{
width: 80px;
margin: 4px auto 2px;
display: block;
}
.titulo_evento, .p_fecha, .p_hora
{
text-align: center;
}
.p_fecha
{
margin-bottom: 4px;
}
.p_hora, .p_persona
{
margin-top: 0;
}
.p_texto
{
font-weight: bold;
margin-bottom: 8px;
}
.span_zona
{
font-weight: bold;
margin-left: 55px;
}
.span_fila
{
font-weight: bold;
margin-left: 125px;
}
.span_asiento
{
font-weight: bold;
margin-left: 135px;
}
.span_zona_info
{
margin-left: 41px;
}
.span_fila_info
{
margin-left: 124px;
}
.span_asiento_info
{
margin-left: 160px;
}
.p_recibo
{
float: right;
}
</style>
<style type="text/css" media="print">
@page{
margin: 0;
}
</style>
</head>
<body>
<div class="recibo">
<img src="logo.png" class="img_logo">
<h2 class="titulo_evento">TEATRO CENTRO SAULO GRADUACION GENERACION 2013 - 2019</h2>
<p class="p_fecha">Viernes 05 Julio 2019</p>
<p class="p_hora">09:00 hrs.</p>
<p class="p_texto">RESERVADO POR:</p>
<p class="p_persona">José Alejandro Alonso Álvarez</p>
<p class="p_texto">ALUMNO:</p>
<p class="p_persona">Luis Alberto Alonso Gutiérrez</p>
<hr>
<span class="span_zona">ZONA</span><span class="span_fila">FILA</span>
<span class="span_zona_info">CENTRAL</span><span class="span_fila_info">A</span>
<span class="span_asiento">ASIENTO</span>
<span class="span_asiento_info">16</span>
<p class="p_recibo">No. Recibo: 00001</p>
</div>
<script>
print();
</script>
</body>
</html>
The question is why when I'm in print view it doesn't show the background image of the div??
In the CSS draft CSS Color Module Level 4 there is a new property called
color-adjust
which can help you solve your problem.By default, user-agents (in this case browsers) tend to try to optimize the output to be more appropriate to the output device (in this case the printer) and initially conform to what the user would want (for For example, a black background could mean an unnecessary waste of ink, so when printing it is omitted, not to mention that depending on what color tones it could also mean a loss of quality).
With the property
color-adjust: exact
you indicate to the browser that you would like to preserve the colors of the page.Your modified example:
IMPORTANT: This property is not supported for all browsers. You can check the browsers for which this property is available here .