Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 409
Johan Fredrik Varen Avatar asked Jan 25 '13 09:01

Johan Fredrik Varen


People also ask

Can PNG be used as background HTML?

To set the background image of a webpage, use the CSS style. Under the CSS <style> tag, add the property background-image. The property sets a graphic such as jpg, png, svg, gif, etc. HTML5 do not support the <body> background attribute, so CSS is used to change set background image.

Can an image be inserted as a background of the webpage?

How to Insert a Background Image in HTML. If you'd like to set an image as the background of a web page or an HTML element, rather than simply inserting the image onto the page, you'll need to use the CSS background-image property. This CSS property replaced the background-image attribute in previous versions of HTML.


2 Answers

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

this should help

like image 161
Cjo Avatar answered Oct 05 '22 09:10

Cjo


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") 
like image 20
khess99 Avatar answered Oct 05 '22 09:10

khess99