0

How do I set file that is located on my computer to be background on www.jsbin.com.

For example if I want to set a background image

background-image:url("file://C:\HTML5\MyExperiment\black-NR.jpg")

But this does not seems to works.

I do not have a place to upload my files. If someone can recommend something better than jsbin.com let me know.

Jedhi
  • 73
  • 1
  • 9
  • 1
    So use some online servis for uploading the image. – Vucko Jul 02 '15 at 13:41
  • 2
    Websites cannot access your PCs local resources. Imagine the security issues... – George Jul 02 '15 at 13:42
  • 1
    you can use base64 for that: http://stackoverflow.com/questions/16449445/how-can-i-set-image-source-with-base64 – Emre Türkiş Jul 02 '15 at 13:42
  • I know it is not best practice, but it was only for testing the website with the specific image. Fair, that it is not possible. Thanks for all your answers. – Jedhi Jul 02 '15 at 20:07

3 Answers3

2

What you are trying goes against the same domain policy and browsers will not allow using a local file to be background of a non-local html page. What you are trying can work if your html file too was local.

If you want to use a local file for website: Ask user to select the file with a file input on that page, use File object added in html5/javascript to access the file and apply as background.

Or as others have suggested, upload the image to a different website.

NikhilWanpal
  • 2,960
  • 3
  • 23
  • 40
1

what you are trying to achieve seems to be a bad practice and personally I wouldn't recommend trying it even if somehow using a static ip can help but this will lead to many problems, and the simplest is when you shut down your computer the image will disappear.

so a good way to do that is using free websites to upload your image then retrieve the link provided. you can use imgur.com, dropbox (public folder), picasa and many other free platforms.

Pierre Irani
  • 805
  • 5
  • 19
-2

Do you want to set your background image using javascript you ask? If so:

My apology, I didn't understand your question, sorry! 

document.body.style.backgroundImage = "url('img_tree.png')";
Altay Mazlum
  • 442
  • 5
  • 15