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 ?

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 ?

• javascript
• html
• css
• google-chrome
• firefox

2 Answers 2

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;
}

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..