Can I use an image from my local file system as background in HTML?

后端未结

关注

 5  1885

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 backgrou

相关标签:

5条回答

星月不相逢

2020-12-05 09:54
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")
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
心在旅途

2020-12-05 09:58
```
background: url(../images/backgroundImage.jpg) no-repeat center center fixed;
```
this should help
0 讨论(0)
发布评论:

提交评论
- 加载中...

情歌与酒

2020-12-05 10:00

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>

0 讨论(0)

慢半拍i

2020-12-05 10:09

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>

0 讨论(0)

盖世英雄少女心

2020-12-05 10:13

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...