Hi newbie here. Am trying to learn the art by reading the book "Build Your Own Website by Ian Lloyd and bumped into a gap on Chapter 5. Example code for loading background images to a website is “background-image: url(clouds.jpg);” The gap that is not explained is the “url(clouds.jpg)”. There is no explanation for this code segment. Is the url some kind of pointer? Where should the image, clouds.jpg, be for the url to point to? Need help 
and thanks.
The image should be in the SAME folder as your HTML web page you are wanting it to display as a background.
Thank you for the quick response.
I’ve tried putting the image in the same folder as the html page.
I still seem to be missing something because the image is not showing up on the navigation segment as background.
The exact code is under #navigation and reads as “{background: #7da5d8 url(backgrounds/Step - Rod Wedding Pic.jpg) no-repeat;”} in the css style sheet.
Navigation has been declared as its own division in all the html pages. All html pages, the image "Steph-Rod Wedding Pic.jpg, and the css style sheet are (of the same level container, not within another container) contained within the same folder.
Still floundering but best regards,
Anton
According to message 3, the directory where your html page is located should contain a subdirectory “backgrounds” in which the image “Steph-Rod Wedding Pic.jpg” is located:
/thewedding.html
/backgrounds/Steph-Rod Wedding Pic.jpg
In any case, you should put the url(‘path/filename’) in quotes, single or double, otherwise spaces in the path or filename will be a problem.
url(‘backgrounds/Steph-Rod Wedding Pic.jpg’)
If the css file were in a “css” directory, you might have to backtrack to get to the backgrounds directory. url(‘…/backgrounds/Steph-Rod Wedding Pic.jpg’)
There’s your problem right there – youa re not allowed spaces in a filename or path on the internet. If it isn’t possible for you rename the image you can get around it be replacing the spaces in the filename with %20, but a better solution is to rename the image without spaces.
As Stevie says, you have to be very careful about file names. A good practice is never to use capitals (for any of your code, indeed) and never have spaces in file names. You gave two versions of your file name above. Be aware that this:
Steph-Rod Wedding Pic.jpg
and this
Step - Rod Wedding Pic.jpg
do not match. That will cause a fatal error. So try something like this:
step-rod-wedding-pic.jpg
Initially—just to get this working and have a feeling of accomplishment—I’d keep everything (the page, the CSS file and the images) all in the one folder, and use a link to the image like this:
{background: #7da5d8 url(step-rod-wedding-pic.jpg) no-repeat;}
Thank you Ronpat, Stevie D, and Ralph.m,
I guess I’ve stumbled thru multiple issues here. The book did not explain about creating a backgrounds file, now its clear to me that there should be a backgrounds that houses the Steph-Rod Wedding Pic jpg. I guess it just means that I have to do a lot more practice so that many of the simple rules you guys have pointed out will become habit. No more cap letters for names, keep the names consistent, and avoid spacing as much as possible. Ralph, the code you wrote if I’m interpreting it correctly will give me the steph-rod-wedding-jpg each time I call for #background.
Right now I keep all my images in a folder called gallery so that means I should have the pathname as gallery rather than background. Gallery is in the same folder as all my html and css files.
Thank you again for your patience and I hope to give you more complex issues rather than simplistic ones such as this :).
Best regards,
Anton
Not quite sure if we are speaking about the same thing here, but if you want an image as a background on an element, you have to specify that image each time.
So, for example, if you wanted a background image on the <body> element on all pages of your site, in your CSS file, you would just do something like
body {background: url(my-image.jpg) no-repeat 0 0;}
That one line will make the image appear on the body element of each page (in other words, underneath any other content on each page).
Hi Ralph,
Yes, that was what I have in mind. I am putting a background image to my navigation div so instead of the word body, I will replace it with navigation.
Thanks and regards,
Anton
Yes, that should work. Assuming your navigation div has a class, of, say “nav”:
.nav {background: url(my-image.jpg) no-repeat 0 0;}
But you’ll need to make sure that the div is actually wrapping around the navigation items. If the nav items are floated, for example, that may not happen, unless you add
.nav {
background: url(my-image.jpg) no-repeat 0 0;
[COLOR="#FF0000"]overflow: hidden;[/COLOR]
}
Hi Ralph,
The overflow: hidden; is a good tip, thanks.
Anton