problema com background e imagens na impressão

[jonata 0]

pessoal já trabalho com site há um tempo mas nunca tinha prestado atenção em um problema,

o qual não consegui resolver!

 

 

já declarei assim <link rel="stylesheet" href="estilos2.css" type="text/css" media="print,screen">... não deu certo (TAGS RECLAMADAS ESTÃO EM AZUL E VERMELHO)...

 

já declarei dentro do arquivo.css assim:

[b][color="#8B0000"]@media screen,print
 {[/color][/b]

/* GERARCUPOM*/

#moldura{height:450px;width:700px;border:solid 1px #CCCCCC;margin:auto;text-align:left}
.tita{height:80px;width:100px;border-bottom:solid 1px #CCCCCC;border-right:solid 1px #CCCCCC;float:left;line-height:80px; [b][color="#0000FF"]background-image:url(fotos/logotipo.jpg); [/color][/b]background-repeat:no-repeat; background-position:center}
.titb{height:80px;width:418px;border-bottom:solid 1px #CCCCCC;float:left;line-height:80px;text-align:center;font-size:18px;color:#333}
.titc{height:80px;width:180px;border-bottom:solid 1px #CCCCCC;border-left:solid 1px #CCCCCC;float:left;line-height:80px;text-align:center;font-size:18px;color:#333;[b][color="#483D8B"]background:#E9E9E9[/color][/b]}
#tarja{height:30px;width:700px;line-height:30px;clear:both;font-size:11px}

#lnta{height:30px;width:135px;line-height:30px;text-align:center;border:solid 1px #CCCCCC;margin:2px;float:left;overflow:hidden;background:#E9E9E9}
#lnca{height:30px;width:146px;line-height:30px;text-align:center;border:solid 1px #CCCCCC;margin:2px;float:left;overflow:hidden}
#lncb{height:30px;width:260px;line-height:30px;text-align:center;border:solid 1px #CCCCCC;margin:2px;float:left;overflow:hidden}

/*RELATORIOS ADMINISTRAADOR*/
.lnrk{height:60px;width:700px;line-height:60px;text-align:left}
.lnrt{height:25px;width:700px;line-height:30px;text-align:center; border:solid 1px #000000}
.celra{height:25px;width:50px;float:left}
.celrb{height:25px;width:80px;float:left}
.celrc{height:25px;width:100px;float:left}
.celrd{height:25px;width:150px;float:left}
.celre{height:25px;width:200px;float:left}

.lnrb{height:25px;width:700px;line-height:30px;border-right:solid 1px #000000;}
.lnrb:hover{height:25px;width:700px;line-height:30px;background:#FFC;cursor:pointer;border-right:solid 1px #000000;}

.cela{height:25px;width:50px;float:left;text-align:center;border-left:solid 1px #000000;}
.celb{height:25px;width:80px;float:left;text-align:center;border-left:solid 1px #000000;overflow:hidden}
.celc{height:25px;width:100px;float:left;text-align:left;border-left:solid 1px #000000;overflow:hidden}
.celd{height:25px;width:150px;float:left;text-align:left;border-left:solid 1px #000000;overflow:hidden}
.cele{height:25px;width:200px;float:left;text-align:left;border-left:solid 1px #000000;overflow:hidden}
[b][color="#8B0000"]}[/color][/b]

[marcelo2605 10]

Jonata, navegadores desconsideram background (e outras coisas) na versão para impressão da página. Era essa sua dúvida?

[Edson Carli 0]

Aproveitando, tem como não ignorar ?

 

Tenho uma página que o ideal era que a impressão fosse exatamente como é visto no navegador e ai ele justamente apaga o background. :mellow:

[marcelo2605 10]

Edson, acho que não. Isso foi feito como uma forma do usuário economizar tinta/toner quando imprime uma página de web. Pense como usuário: se eu precisasse imprimir uma página com fundo preto, não gostaria que a impressora gastasse o cartucho inteiro imprimindo uma folha onde só me interessa um texto, por exemplo.

[Edson Carli 0]

  Em 26/09/2012 at 12:50, marcelo2605 disse:

Edson, acho que não. Isso foi feito como uma forma do usuário economizar tinta/toner quando imprime uma página de web. Pense como usuário: se eu precisasse imprimir uma página com fundo preto, não gostaria que a impressora gastasse o cartucho inteiro imprimindo uma folha onde só me interessa um texto, por exemplo.

Obrigado Marcelo. Sim, faz sentido ser isso como padrão, mas seria ótimo se pudesse ser ignorado pois algumas vezes o usuário quer imprimir como está la. No meu caso por exemplo é um plugin que gera um gráfico usando componentes HTML e não imagem, porém na hora de imprimir o gráfico some :mellow:

Pior que não sou eu o responsável pelo componente de gráficos e não posso mexer nele, então pelo visto é problema sem solução :ermm:

[jonata 0]

APÓS NÃO FAZ SENTIDO PRA MIM... ISSO DEVERIA SER DEFINIDO ATRAVÉS DA FOLHA DE ESTILOS DA PÁGINA...

A MELHOR FORMA DE CONTORNAR ESSA SITUAÇÃO PQ EU CRIEI UNS RELATÓRIOS E É IMPORTANTE A PRESENÇA DO BACKGROUND...

AGUARDO RESPOSTA

[japie 0]

Vi essa solução, mas nunca testei:

http://stackoverflow.com/questions/5949897/how-to-get-a-background-image-to-print-using-css

 

Será que funciona?

[Web_avallon 5]

Eu fiz da seguinte forma galera e deu certo. Ao invés de colocar como background, coloque uma div com uma imagem normal. Exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Teste </title>
</head>

<body>
  
  <div id="bg"> 
     <img src="imagembackgroundaqui.png"/>
  
  </div>
 

</body>
</html>

Muito simples até aí, depois vamos para o css:

 

#bg img {width: 100%; 
             height:100%; 
             opacity:.5; 
             z-index: 0;
}

Observe que eu coloquei a largura e a altura com 100% para se ajustar em toda a tela e em qualquer resolução, depois uma opacidade para se parecer como uma marca d'agua realmente e por fim defini um z-index 0 para ficar atrás de todos os elementos (recomendo colocar a div antes de todas as outras, para caso do z-index der algum problema).