rocknbil - 6:00 pm on Nov 21, 2011 (gmt 0)

1. You don't need quotes either, although I have no example handy, they've caused some havok on some sites that was fixed by just removing them.

Also what happens if your background doesn't tile well, or incorrectly, or the viewport exceeds it's width? You need two control the position and repeat properties as well. Two examples:

/*shorthand*/

body {
background:url(/App_Themes/Peacock/img/MainBackground.png) top left no-repeat;
/* or for horizontal repeat:*/
/* background:url(/App_Themes/Peacock/img/MainBackground.png) top left repeat-x; */
}

/* longhand*/
background-image:url(/App_Themes/Peacock/img/MainBackground.png);
background-repeat: no-repeat;
background-position:top left;
}

Downside: see below . . .

2. Here is why the root-relative URL gets important:

[FROM ROOT]
css
images
about-us/our-team/index.html (even though you wouldn't need to specify index.html)
index.html

So from index.html, references in dot-toothpick syndrome syntax would be

images/file.jpg

From the css directory it would be

../images/file.jpg

from the our-team/index.html it would be

../../images/file.html

After a while it becomes tiresome, annoying, and error prone to keep track of all your dots and leaning toothpicks. For all of the above, you could just do

/images/file.jpg

The leading slash always starts at root. This way it's one less error to worry about, you can focus on other errors.

Another important aspect, if your site is dynamic and you use mod_rewrite, you may not actually be in the directory you expect. Given a typical example, but exaggerated for demonstration,

[FROM ROOT]

blog/index.php

Let's say you have a rewrite rule to manage friendly URL's,

ReWriteRule (.*) /blog/index.php?q=$1 [L,QSA]

So if you request "/about/our-team" it will direct to /blog/index.php, but your page output will still "think" it's at /about/our-team. So references to ../css/my.css won't work . . .but /css/my.css will.

The downside: Since your local computer is not a web server (unless you install local software to make it so,) it doesn't have a "domain root" so the leading slash won't work.

j:\App_Themes\Peacock\img

You'll have to make a local copy and mod it before uploading. Generally this isn't a problem, I use a search-and-replace function that nukes all the toothpicks prior to upload and replaces them with a single leading /.