0

template.html

{% block css-custom %}
    <link rel="stylesheet"  type="text/css" media="print" href="{{ STATIC_URL }}style/print.css" />
    <link rel="stylesheet"  type="text/css" media="screen" href="{{ STATIC_URL }}style/print.css" />
{% endblock %}

{% block main-content %}
''''''''''''''
<table width="100%" border="0" class="printimg">

            <tr><td>some data</td></tr></table>
'''''''''''''''''
{% endblock %}

I want to set the above image as background for the table.If i set the same image in a tag in , it is coming for display, but as background it is not happening.As html page it is working,problem is with printing it in paper.

On print preview the background image is coming for display but on printing in paper the image gets disappeared.

edit:

report.css

.printimg {
           background:url('/static/images/human.png');
           width:128px;
           height:293px;
           background-position:center;"
          }

/* media:screen */
@media screen {
.printimg img{
    visibility: hidden;
}
}

/* media:print */
@media print {
.printimg img{
    visibility: visible;
}
}

I tried with this css,still the same problem is their.

Monk L
  • 3,358
  • 9
  • 26
  • 41

2 Answers2

6

1.To enable background printing in Chrome and Safari web browsers add

-webkit-print-color-adjust:exact;

in your print.css file,rest all is same

2.In FireFox by default "Print Background colours and images" turned off in their print settings,no CSS will override that.

User should manually turn on if background image is required.

Steps for turn on background in FF:

Go to File -->Page setup -->Formats & Options -->Tick Print background(images & colors)

Hope this help!

Community
  • 1
  • 1
user2409078
  • 88
  • 9
0

This is a browser setting, not anything to do with Django. See this thread How to forcefully print background image in HTML?

Community
  • 1
  • 1
Mikael
  • 3,148
  • 22
  • 20
  • I tried with above code in edit,still the same issue.May i know what i am doing wrong – Monk L Jul 31 '13 at 15:52
  • In the example link there is an image within the div which is hidden when the page is displayed on the screen. Once printing the background element in the CSS is hidden and the is set to display: inline. – Mikael Jul 31 '13 at 17:01
  • I am using table,css class is applied to that table,table background image not printing in paper do i need to include any other style in css related to print.Please refer my updated question. – Monk L Aug 01 '13 at 14:39
  • 1
    OK to explain further... you can't print the table's background image due to browser settings. You can fake it by hiding the table's background image and instead showing the background image as an inline image in the table. The example shows just how to do that. When on screen the div's background image is displayed. When printing the background image is hidden but it is displayed as an inline image instead. This way the inline image will be printed. – Mikael Aug 02 '13 at 14:32