How to stack/merge multiple images and output as a single .png image with PHP?

I have this code and i mean it works great but i would rather it be outputted as two images stacked and merged into one image (i want the avatar.png to be on the bottom and the hat to be on the top) but i dont know how

 <?php
 include ('connection.php');
 $id = mysql_real_escape_string($_GET['id']);
 $query = "SELECT * FROM users WHERE userID='$id'"; 
 $result = mysql_query($query);
 while($row = mysql_fetch_array($result)){   
 echo "
 <div><b>
 <div style='width: 100px; height: 200px; z-index: 3;  background-image:   url(/images/avatar.png);'>
 <div style='width: 100px; height: 200px; z-index: 3;  background-image: url(/images/Hats/" . $row['HatPath'] . ");'> 
 </div>
 </div></b>
 </div>
 ";  }

 mysql_close()
 ?>