I am creating a web page that can receive an image and set it as a background image.
My work till now:
function a(a) {
document.body.style.backgroundImage = "url(a.value)";
}
<input type="file" onchange="a(this);">
Since the value comes as C:\fakepath\Image.extension
, the background doesn't changes. So, can you please help me to do this using javascript only. I know this is a very strange question. But it will help me to learn something new and can help others too.
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">