CSS question : how to insert background image from you computer or other website . please help?

Question

tutorial I used : http://www.w3schools.com/css/css_background.asp

I can't understand sh!t . They just gave the code without any information about it . I understand that in this code :

body {background-image:url('paper.gif');}

('paper.gif') is the name of the file but where is the source of the image come from ?

Answer 1

Image URL is http://www.w3schools.com/css/paper.gif

its in their css folder so there is no need to give the whole path to the file.

Answer 2

You can use either an absolute or a relative path.

A relative path means the URL will point to the background image starting from the place where the html document is. For instance if you only use the filename without a path, like in the example given by w3fools, the image needs to be in the same folder as the web page you're editing.



An absolute path otoh will start with http://... and contain the full URL of the file.

Just to make this clear: if you are editing an online website, the image has to be online, too. You can't point the browser to an image on your computer, because it won't load for anybody else.



The easiest way is to put the image on photobucket or flickr or imgur, then copy the direct link and paste it into the brackets.

If you have your own webspace, upload the image to the folder where your html document / style sheet is, then use just the filename.



Here's an example, using a random google image:

http://jsfiddle.net/khrismuc/9aBm3/

Answer 3

for HTML5 tutorials try video demonstrations, are better than pure theory



http://w3-video.com/Web_Technologies/HTML5/index.php

Answer 4

You have to make sure you use the entire URL such as C:/User/paper.gif. Just using paper.gif doesn't tell it where to find the file.