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);">

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 es 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.

• javascript
• html
• input-type-file

• I'm sorry. I don't know how to ask questions properly. I had even read the page which helps to know us how to ask good questions. But nothing worked. Can you please help me to improve the question? Thanks for the ment. – user8158111 Commented Mar 10, 2018 at 16:55
• Here's a link to many sites that talk about it – user9016207 Commented Mar 10, 2018 at 22:16

2 Answers 2

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">

You need to read the contents of the selected file using HTML5 FileReader API then get base64 encoded Data-URL of it. Then you can set this URL as background of anything.

If you don't know Data-URL is a type of URI that does not point to the location of a file, rather it holds the whole content of the file in base64 encoded format inside the URL. Any file can be converted to a Data-URL. You can read more about it here.

Note: Data-URI is only preferred for small files. Do not convert megabyte size files into Data-URI.

function previewFile(fileInput) {
  var file = fileInput.files[0];
  var reader = new FileReader();

  reader.addEventListener("load", function() {
    setBackground(reader.result);
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}
function setBackground(imageURL){
    document.body.style.backgroundImage = "url(" + imageURL + ")";
    document.body.style.backgroundSize = "100% auto";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundPosition = "center top";
}

<input type="file" onchange="previewFile(this);">