57

I've got an HTML document hosted on a remote web server. I'm trying to have one of the elements on the web page use an image file from my local file system as its background image. No luck with Chrome, Safari or Firefox (haven't tried IE).

Here's an example of what I've tried so far.

<!DOCTYPE html>
<html>
    <head>
        <title>Experiment</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            html,body { width: 100%; height: 100%; }
        </style>
    </head>
    <body style="background: url('file:///Users/username/Desktop/background.png')">
    </body>
</html>

If I inspect the body element using my browser's web inspection tool, and select "Open image in new tab" the image is there. So the browser is fully capable of getting at the image file using the given URL.

Is what I'm trying to pull off at all possible, or is this a security feature of the browser trying to block external domains from accessing the user's local resources?

Improve this question
4
  • Why are you wanting to do this? Why not just upload the image to your webserver? Anyway, how does the server know what box the file location is at? You need more than just a local path unless your site is local. Make sense? I'm pretty sure it's a security thing and I'm not sure how you would go about making it work....or why you would want to. Seems like you are asking for trouble. :-) Commented Jan 25, 2013 at 14:37
  • N1tr0: To answer your question, I wanted to create an alternative to Pixel Perfect and similar overlay browser extensions, as several browsers lack these (IE, for instance). A file upload element to pick a local image file and then some JS to grab its value and create an overlay. Commented Feb 1, 2013 at 13:08
  • To save yourself some pain, I would suggest uploading the file to a server. It's easy to accidentally forget that you're using a local file as a background-image for your HTML document, and accidentally delete or move the file. Commented Mar 31, 2014 at 23:47
  • 11
    "is this a security feature of the browser trying to block external domains from accessing the user's local resources" Yes. This used to be possible but modern browsers block file:// links from working when loaded in a non-file: url. Commented Jul 3, 2014 at 19:07

5 Answers 5

Reset to default
37 
background: url(../images/backgroundImage.jpg) no-repeat center center fixed;

this should help

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

The OP was asking about how to make his browser load HTML from a remote server which references a file that's on his local filesystem. I think your suggestion would only work if the image was also on the remote server.
In cases where you cannot use a file simply like this starting a quick webserver i.e. via github.com/http-party/http-server helps.
This just will try to load backgroundImage.jpg from the webpath images/ of the server your html is served from...
29

It seems you can provide just the local image name, assuming it is in the same folder...

It suffices like: 

background-image: url("img1.png")
Improve this answer

1 Comment

The question is quite clear that it is not in the same folder. The image is on the local file system and the HTML document is on a remote server.
7

Jeff Bridgman is correct. All you need is
background: url('pic.jpg')
and this assumes that pic is in the same folder as your html.

Also, Roberto's answer works fine. Tested in Firefox, and IE. Thanks to Raptor for adding formatting that displays full picture fit to screen, and without scrollbars... In a folder f, on the desktop is this html and a picture, pic.jpg, using your userid. Make those substitutions in the below:

<html>
<head>
    <style>
        body {

        background: url('file:///C:/Users/userid/desktop/f/pic.jpg') no-repeat center center fixed;

        background-size: cover; /* for IE9+, Safari 4.1+, Chrome 3.0+, Firefox 3.6+ */
        -webkit-background-size: cover; /* for Safari 3.0 - 4.0 , Chrome 1.0 - 3.0 */
        -moz-background-size: cover; /* optional for Firefox 3.6 */ 
        -o-background-size: cover; /* for Opera 9.5 */
        margin: 0; /* to remove the default white margin of body */
        padding: 0; /* to remove the default white margin of body */
        overflow: hidden;
             }
    </style>
</head>
<body>
hello
</body>
</html>
Improve this answer

1 Comment

"this assumes that pic is in the same folder as your html" — The question is quite clear that it is not. The image is on the local file system and the HTML document is on a remote server.
2

FireFox does not allow to open a local file. But if you want to use this for testing a different image (which is what I just needed to do), you can simply save the whole page locally, and then insert the url(file:///somewhere/file.png) - which works for me.

Improve this answer

Comments

1

You forgot the C: after the file:///
This works for me

<!DOCTYPE html>
<html>
    <head>
        <title>Experiment</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            html,body { width: 100%; height: 100%; }
        </style>
    </head>
    <body style="background: url('file:///C:/Users/Roby/Pictures/battlefield-3.jpg')">
    </body>
</html>
Improve this answer

1 Comment

Given that they have a Users directory containing a "my user name" directory containing a Pictures directory it is much more likely that they are using macOS (or OS X as it was known in 2013) than that they forgot the disk name.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.