-4

Possible Duplicate:
How to get a background image to print using css?

i have a div that has a picture background 

<html>
<head>    
</head>
<body>
<div style='background:url(name.png);width:100px; height:100px;'></div>
<input type='button' onclick='window.print()'>//button that print

 </body>

 </html>

it works fine when i view it in browsers..but the moment that i print the page with div it doesnt print the background picture... but does print the text and image declared in

how could i fixed this ???

Community
  • 1
  • 1
Nj Lac
  • 103
  • 2
  • 8
  • You should add `print` css: http://stackoverflow.com/questions/596876/how-can-i-print-background-images-in-ff-or-ie – MarcinJuraszek Feb 22 '12 at 07:14
  • 3
    You're also supposed to do [your own research](http://stackoverflow.com/search?q=print+background+image) first. – Quentin Feb 22 '12 at 07:15

2 Answers2

0

You can set StyleSheet media = print and than you can try 

@media print {
   div {font-size: 10pt; line-height: 120%; background: white;}
}
Pranay Rana
  • 175,020
  • 35
  • 237
  • 263
0

Browsers by default do not print background images. More often than not the pictures get in the way of reading the text.

So, we'll assume you have a good reason. Your design is so super awesome that it needs to be printed or something. Maybe you are creating a e-ticket stub and the text overlays the template image. Let's go with that.

To defeat the default action of having background images not print, I would simply not have my image as a background. I would let it be a regular html element and use either CSS and/or JavaScript to layer the image under your text. Look at the position and z-index CSS properties.

Your old problem is gone, good luck with the new problems this may create.

BradChesney79
  • 650
  • 7
  • 16