print div With unspecified background html,javascript,php - php

Question

I have a project for kids cards where the child selects the background from specific backgrounds and write his name and print
But the problem is that I only want to print the card (apDiv14 with background) not the full page Or if there was a way to convert certain content to pictures for print
<div id="apDiv14">
<div id="for1">
<h1 ID="head1"> <br>
<h1 ID="head2"> <br>
<h1 ID="head3"> <br>
<br>
</h1>
</div>
<div id="apDiv17"><form name="form1">
<p>
<br>
<input type="text" name="newtitle" size="25">
</p>
<input type="text" name="newtitle2" size="25">
<br>
<br>
<select name="newtitle3" style="width: 150px;">
<option value="">age</option>
</select>
<br>
</p>
<p> <img src="img/BB.gif" width="80" height="45" onClick="ChangeTitle();"><img src="img/PB.gif" width="80" height="45" onClick="pri();"> </p>
<p>
</form> </div></div>
<script>
function pri() {
window.print(); }
</script>
function pic1(apDiv14)
{
// background 1
document.getElementById("apDiv14").style.backgroundImage="url('img/1st card Jeddah.jpg')";
document.body.style.zIndex='4';
document.getElementById("apDiv14").style.backgroundSize = "527px 307px";
document.getElementById("apDiv14").style.backgroundRepeat='no-repeat';
}
function pic2(apDiv14)
{
//background 2
document.getElementById("apDiv14").style.backgroundImage= "url('img/2nd card Jeddah.jpg')";
document.body.style.zIndex='4';
document.getElementById("apDiv14").style.backgroundSize = "527px 307px";
document.getElementById("apDiv14").style.backgroundRepeat='no-repeat';}

Answer 1

You can use a print media stylesheet to limit which content gets printed (by setting other content to display: none but most browsers are configured to not print background images (since they are rarely important and use a lot of ink).
I'd approach this by using some server side code to generate a PDF version for printing and using a form to submit the options to the server.

Answer 2

javascript code:
var content = document.getElementById("divcontents");
var pri = document.getElementById("ifmcontentstoprint").contentWindow;
pri.document.open();
pri.document.write(content.innerHTML);
pri.document.close();
pri.focus();
pri.print();
html code:
<iframe id="ifmcontentstoprint" style="height: 0px; width: 0px; position: absolute"></iframe>