[Solved] How to set an image as a background image in html using input type=”file”?

by


Simply wrap the File blob into an Object-URL (URL.createObjectURL) and set that as source for the CSS background image.

This will simplify your code, the image will be processed faster and image size will be less of a problem:

document.querySelector("input").onchange = function() {
  var url = URL.createObjectURL(this.files[0]);
  document.body.style.background = "url(" + url + ") no-repeat";
}
<input type="file">

6

solved How to set an image as a background image in html using input type=”file”?