How do i add an image to body background in css for html?

Question

I am in html, and i want to put a background image in the css for the html, but i cannot figure out how. I know how to program the image not to repeat and where to go,etc. but i do not know how to paste or insert the background image into the css coding. Can someone please give me the code and the explanation of it?

- I have seen that you put this........ EX. body { background-image: url ( 'paper.gif' ); ....... but i do not understand the : url ( 'paper.gif ' ) part. What do i put into the parentheses, etc.

Answer 1

Okay, now i did one Website before and this's what i did at the (very very first page)















1 Now you see i did --> url(images/bg.jpg); <--- the URL means where is the background image located.

2 images = is the file name i created next to the index.html.

(You don't have to create a file like i did, but just to be organized.

3 bg.jpg = is the background image i used for my home page inside the (images) file.

^ Remember that the image name you type in css should match with the image name you have in the file or any where else.

Answer 2

dazabas gave a good answer, but just in general: a URL (uniform resource locator) is the path to a resource (html page, image, PDF, etc), usually on the internet.

Example: http://i.imgur.com/Tm0nlyP.jpg



The above URL is a full URL, starting with the protocol, http:, followed by the complete path.



So to use that burger picture as background, you type

background-image: url(http://i.imgur.com/Tm0nlyP.jpg);



Usually though, you can also use a so-called relative url. Meaning if the document that contains the URL is located here http://site.com/about/index.html then the location of the document is http://site.com/about/

So using

background-image: url(paper.gif);

in said index.html will make the browser try and load http://site.com/about/paper.gif

Answer 3

Your folder structure



root/index.html

root/images/paper.gif

root/css/styles.css



In your styles css "background-image:", the url() holds the path to your image file, note "../images", the "../" in "../images" means up one level, the image location is relative to the css file instead of the html page that uses the css. So if we see this in a first person view, we are within the CSS folder, we have to climb up one folder out of the css folder, where when we look around the directory, we can see index.html, images folder and the css folder, then we go into images folder, to grab paper.gif.



body {

background-image: url(../images/paper.gif);

background-repeat: no-repeat;

background-position: center top;

}



Of course your HTML will have to link to the CSS: