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

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”; … Read more