If you use AJAX and send a picture to the server, then two problems arise:

  1. This background is set for everyone.
  2. The server is small and weak, it will not sustain much load.

The question is: "How to implement the change of the page background on the client side?"

  • How do you get a picture from a client? - ThisMan

1 answer 1

Implementation example on JS.

HTML

<input type='file' id='getval' />

CSS

 body { background-image:url(''); background-size:cover; background-position: center; }

Js

 document.getElementById('getval').addEventListener('change', readURL, true); function readURL(){ var file = document.getElementById("getval").files[0]; var reader = new FileReader(); reader.onloadend = function(){ document.body.style.backgroundImage = "url(" + reader.result + ")"; } if(file){ reader.readAsDataURL(file); }else{ } }

Demo: http://codepen.io/anon/pen/vGJwom

The image can be remembered on the client and does not load the server.