Title: Custom Image as Background Image
Last modified: July 24, 2017

---

# Custom Image as Background Image

 *  Resolved [calvinseng](https://wordpress.org/support/users/calvinseng/)
 * (@calvinseng)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/custom-image-as-background-image/)
 * Hi,
 * Saw your respond a year ago about using custom image but I can’t seem to understand
   or get it working.
 * I tried to following accordingly by creating a JS as following,
 *     ```
       <script type="text/javascript">
   
       window.onresize = drawSignatureBackground;
       $( document ).ready( function() {
       	$("#wpcf7_BodyParts_signature").on("mouseup", function(){
       		drawSignatureBackground();
       	});
       } );
   
       function drawSignatureBackground() {
          var canvas = document.getElementById("canvasID");
          var ctx=canvas.getContext("2d");
          var image = new Image();
           image.onload = function() {
            ctx.drawImage(image, 0, 0);
          }
          image.src = 'http://domain.com/wp-content/uploads/2017/07/body_parts-1.jpg';
       }
   
       </script>
       ```
   
 * The javascript is showing in the signature page but not replacing the white background.
 * Hope you would be able to assist me out.
    Thanks much in advance!

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [tameroski](https://wordpress.org/support/users/tameroski/)
 * (@tameroski)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/custom-image-as-background-image/#post-9345525)
 * Hi !
 * The code seams Ok to me, as long as the canvas ID exists and the image URL is
   pointing to a real image.
 * I made the test myself, and it’s working fine. Maybe remove the mouseup event
   listener part : unless it’s intended it’s useless.
 *  Thread Starter [calvinseng](https://wordpress.org/support/users/calvinseng/)
 * (@calvinseng)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/custom-image-as-background-image/#post-9345572)
 * Thank you so so much man!
 *     ```
       <script type="text/javascript">
   
       window.onload = drawSignatureBackground;
       $( document ).ready( function() {
       	$("#bodyparts").onload( function(){
       		drawSignatureBackground();
       	});
       } );
   
       function drawSignatureBackground() {
          var canvas = document.getElementById("bodyparts");
          var ctx=canvas.getContext("2d");
          var image = new Image();
           image.onload = function() {
            ctx.drawImage(image, 0, 0);
          }
          image.src = 'http://your-domain.com/wp-content/uploads/2017/07/body_parts-1.jpg';
       }
   
       </script>
       ```
   
 * This is the final script. For whoever requires the picture to show onload.
 * I missed filling up the canvas ID within the function.
    -  This reply was modified 8 years, 10 months ago by [calvinseng](https://wordpress.org/support/users/calvinseng/).
    -  This reply was modified 8 years, 10 months ago by [calvinseng](https://wordpress.org/support/users/calvinseng/).

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Custom Image as Background Image’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7-signature-addon/assets/icon-256x256.jpg?rev
   =1208819)
 * [Contact Form 7 Signature Addon](https://wordpress.org/plugins/contact-form-7-signature-addon/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7-signature-addon/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7-signature-addon/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7-signature-addon/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7-signature-addon/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7-signature-addon/reviews/)

## Tags

 * [custom background image](https://wordpress.org/support/topic-tag/custom-background-image/)

 * 2 replies
 * 2 participants
 * Last reply from: [calvinseng](https://wordpress.org/support/users/calvinseng/)
 * Last activity: [8 years, 10 months ago](https://wordpress.org/support/topic/custom-image-as-background-image/#post-9345572)
 * Status: resolved