16

I have a web page that contains some background images and css colors, but when i print the page using ctrl + p its showing page print preview without css and background colors.

I have a div element that has inline style attribute(because the background image of the div will be selected dynamically using for loop in coding) as below

<div class='assessment' style='background-image: url('/static/images/print_%s.png')' >
    <p></p>
    <p></p>
</div>

So i head read something here that we can write print media css to make background images and colors visible by default like

@media print {
.assessment {
   visble:visible;
  }
}

But i don't know how to write this media css with inline css(style='background-image: url('/static/images/print_%s.png')) that i have in my above div

So how to write the media css with the inline css to make the background images visible in the print preview by default when some clicks ctrl+p ?

Community
  • 1
  • 1
Shiva Krishna Bavandla
  • 25,548
  • 75
  • 193
  • 313

2 Answers2

14

This answer will help you. It works for FF and Chrome. First you set !important to your inline css, like so <div class='assessment' style='background-image: url('/static/images/print_%s.png')!important >. Then in your css file:

@media print {
  -webkit-print-color-adjust: exact;
}
Community
  • 1
  • 1
Ivaylo Petrov
  • 183
  • 1
  • 11
  • but the first time the page is refreshed or reopened, the background image does not appear. It appears after the background image. How can I make it appear permanently – Büşra Güler Jul 31 '23 at 13:02
1

how about using @media print method?

@media print {
body {
   content:url(background.jpg);
  }
}

While giving the print option there are some setting where you can choose many option to print a background image or not..

Kheema Pandey
  • 9,977
  • 4
  • 25
  • 26
  • As i have describe above i will have different background images selected in for loop so i have used inline attribute for background image, is i write media css as above then i will have to display fixed background image for the div right ? I will generate the above divs in for loop with dynamic background images – Shiva Krishna Bavandla Mar 13 '14 at 11:35
  • unfortunately Inline styles cannot contain anything other than declarations. – Kheema Pandey Mar 13 '14 at 11:42
  • This method worked for me in all current versions of IE, Edge, FF, Chrome, Opera, and Safari, as of 5-10-18. Thanks! – Troy Thibodeaux May 10 '18 at 22:13