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

Question

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    lt  DOCTYPE html gt   lt html gt       lt head gt           lt title gt Experiment lt  title gt           lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt           lt style gt              html body   width  100   height  100              lt  style gt       lt  head gt       lt body style  background  url  file    Users username Desktop background png    gt       lt  body gt   lt  html gt    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

User · Answer

You forgot the C  after the file     This works for me   lt  DOCTYPE html gt   lt html gt       lt head gt           lt title gt Experiment lt  title gt           lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt           lt style gt              html body   width  100   height  100              lt  style gt       lt  head gt       lt body style  background  url  file    C  Users Roby Pictures battlefield-3 jpg    gt       lt  body gt   lt  html gt

User · Answer

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

User · Answer

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    lt html gt   lt head gt       lt style gt          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                      lt  style gt   lt  head gt   lt body gt  hello  lt  body gt   lt  html gt

User · Answer

background  url    images backgroundImage jpg  no-repeat center center fixed    this should help

User · Answer

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

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

Examples related to html

Examples related to css

Examples related to background-image