55

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?

Johan Fredrik Varen
  • 3,796
  • 7
  • 32
  • 42
  • 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. :-) – N1tr0 Jan 25 '13 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. – Johan Fredrik Varen Feb 01 '13 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. – geoff Mar 31 '14 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. – Daniel Beck Jul 03 '14 at 19:07

5 Answers5

33
background: url(../images/backgroundImage.jpg) no-repeat center center fixed;

this should help

user229044
  • 232,980
  • 40
  • 330
  • 338
Cjo
  • 1,265
  • 13
  • 19
  • 6
    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. – Dan Oct 25 '15 at 03:49
  • In cases where you cannot use a file simply like this starting a quick webserver i.e. via https://github.com/http-party/http-server helps. – s.Daniel Apr 28 '20 at 10:51
  • This just will try to load backgroundImage.jpg from the webpath images/ of the server your html is served from... – René Baudisch Dec 22 '21 at 11:59
27

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")
Jeff B
  • 8,572
  • 17
  • 61
  • 140
khess99
  • 287
  • 3
  • 3
  • 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. – Quentin Nov 01 '22 at 15:36
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>
Tamir Abutbul
  • 7,301
  • 7
  • 25
  • 53
pollaris
  • 1,281
  • 17
  • 20
  • "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. – Quentin Nov 01 '22 at 15:36
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>
Roberto
  • 528
  • 7
  • 15
  • 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. – Quentin Nov 01 '22 at 15:38
1

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.

Philippp
  • 847
  • 1
  • 8
  • 17