Background printing issues using bootstrap in Firefox

Asked

Viewed 551 times

0

Good afternoon friends,

I haven’t had much practice with Bootstrap yet, I haven’t been able to figure out a way to keep a div background when I print a page through the window.print()

I have the following code:

<div class="qCor" style="background-color: #752740 !important;">

On screen

inserir a descrição da imagem aqui

However when printing by the browser the background of the div is empty.

inserir a descrição da imagem aqui

Any suggestions how I can divert this problem?

html css bootstrap impression firefox
  • 1

    Also use this property in your style: -webkit-print-color-adjust: exact;

  • For Chrome it worked 100%. But would need for Firefox, know some alternative to Firefox?

2 answers

1


I ran some tests here at Chrome and saw that it prints without backgrounds when the option background graphics is disabled.

It gets on the screen that you will confirm the printing, choose printer or PDF, etc. click on Mais configurações will be the last option (in my browser is background graphics).

making via CSS: Voce will not be able to reach all browsers

.suaClasse{
    -webkit-print-color-adjust: exact; /*funciona no chrome e opera*/
    color-adjust: exact; /*funciona no Firefox*/
}

inserir a descrição da imagem aqui

  • Hello André, the alternative that Douglas commented, works in Chrome, but I need an alternative to Firefox.

  • I tried what he said here and it hadn’t worked for me, so I didn’t even quote

  • I tested it like this in Chrome style=" -Webkit-print-color-Adjust: Exact ! Important; background-color: #752740 ! Important;" and it worked!

  • 1

    vi here and only works for Chrome and safari. https://developer.mozilla.org/en/docs/Web/CSS/-webkit-print-color-adjust

  • 1

    update reply, serve pro firefox color-adjust: exact;

  • I found a way, using "color-Adjust: Exact ! Important;", started working on Firefox.

  • That’s it. Thanks!

Show 2 more comments

0

Oops, I found a solution.

I modified the style following Douglas' suggestion.

style=" -webkit-print-color-adjust: exact !important; color-adjust: exact !important; background-color: #752740  !important;"

This way it’s working on both Chrome and Firefox.

Thanks for the comments.

Browser other questions tagged html css bootstrap impression firefox

You are not signed in. Login or sign up in order to post.