-
☆ A M B ☆
- 73 Posts
Hi everybody,
I'm looking for a way to build a pop-up coupon that a client can print out.
We want the coupon to be editable using a TV (a simple one line text) that is passed to the coupon CHUNK.
The coupon CHUNK has the background image, print command, and close window command along with where the text will be displayed.
Our issue lies with printing the actual coupon, when we try to print it, the background image will not show up.
If anyone has experience with this **OR** if someone knows how to make this, let me know. Our client needs this done and if I have to pay someone a small (please be small) fee, I'm not opposed to doing so.
Thanks!
Web print settings are usually defaulted to not print backgrounds. Try placing the background image in a div set to cover the entire body area instead.
What prints and what doesn't is usually determined by the CSS file.
You add this in the head section:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Then in print.css you make divs printable or not with
display:block
or
display:none
Here is a handy print button that will print the whole page:
<div class="dontprint">
<form><input type="button" value=" Print this coupon "
onclick="window.print();return false;" /></form>
</div>
That class is specified in the print.css file as display:none; so the button itself won't be printed.
There's and example here:
http://bellands.com/fall-coupon.html
You can do a "View Source" on it to see the HTML and click on the two CSS file links to see the CSS for the web page and the printed page.
-
☆ A M B ☆
- 894 Posts
The easiest method is to put an image inside a div and insert the text absolute positioned on top of the image and print it.
I made a sample page so you have a better idea on how to implement it download it
here.
Good Luck.
