title: Force browsers to print background images on chrome, firefox
body: <p>I have a web page that contains some background images and css colors, but when i print the page using <code>ctrl + p</code> its showing page print preview without css and background colors.</p>
  
  <p>I have a <code>div</code> element that has inline style attribute(because the background image of the div will be selected dynamically using for loop in coding) as below</p>
  
  <pre><code>&lt;div class='assessment' style='background-image: url('/static/images/print_%s.png')' &gt;
      &lt;p&gt;&lt;/p&gt;
      &lt;p&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So i head read something <a href="https://stackoverflow.com/questions/6670151/how-can-i-force-browsers-to-print-background-images-in-css">here</a> that we can write <code>print media</code> css to make background images and colors visible by default like</p>
  
  <pre><code>@media print {
  .assessment {
     visble:visible;
    }
  }
  </code></pre>
  
  <p>But i don't know how to write this media css with inline css(<code>style='background-image: url('/static/images/print_%s.png')</code>) that i have in my above div</p>
  
  <p>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 <code>ctrl+p</code> ?</p>