Adding a background image

[BRoberson1657]

CAN SOMEONE HELP? I'm new to CSS and having trouble with a very simple task. I'm trying to add a background image to my site. The current code doesn't have a line for displaying a background image so it defaults to white. Since I'm pretty new to editing CSS I'm not sure what code I need in order to tell it to load a background image.

The "new background" image will be-
named: MainBackground.png
located here: j:\App_Themes\Peacock\img

If you need to see more of the source code please visit the site: http://peacockpress.printnow.net/


Here is the current code as it is now:
--------------------------------------------
body
{
margin: 0;
padding: 0;
font-size: 12px;
font-family: Arial, Helvetica, Sans-Serif;
}

* { outline: none; }

:focus{ outline: none; }

[Hoople]

body
{
margin: 0;
padding: 0;
font-size: 12px;
font-family: Arial, Helvetica, Sans-Serif;

background-image:url('App_Themes/Peacock/img/MainBackground.png');

}

[lucy24]

Note too-- I've been bitten by this more than once :( -- that relative links in the CSS are relative to the stylesheet, not to the page that calls the styles. It is probably safer to use a site-absolute link.

Matter of fact, I have been bitten by it so often that I went back and checked before clicking Submit ;) And then, er, hastily swapped two phrases.

[rocknbil]

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 /.