Carolyn E. Cooper Communications

hi, thanks so much for the tutorial above. I have a further question on the same lines. I figured out how to change the color, but i want to change the background color to an imge that is on my desktop, a jpg file saved on my desktop. I havent been able to figure out where to upload the file to..i use wordpress, and tried putting it in to my media files, but that didnt help. and i have no clue of where the code has to be changed.
Please help.
Regards,
R

Ah, yes. Changing background images is a little bit different than just changing the color. You will need your image in a web-compatible format — either .jpg (or .jpeg), .gif, or .png. You then need to upload your image with your FTP program into the correct directory. And finally, you need to edit your theme style sheet. Let’s walk through this process in a little more detail.

Step 1 — Prepare Your Image

If you are not planning to repeat your image over the entire screen, you will want to make certain that the background color of your image is the same as the background color of the body tag in your stylesheet.

Step 2 — Upload Your Image Into Your Theme Directory or Sub-directory

Strange-Little-Town Theme directory with the theme templates, stylesheet and image sub-directory

Your Wordpress themes reside in the wp-content/themes directory. So the path for the Strange Little Town them in my site is: /wp-content/themes/strange-little-town. And inside most themes directories, there is a sub-directory for images. It may be called img or images. This is where the images related to the theme styling are placed. See the directory image to the right.

You need to upload your background image using an FTP program into your theme directory. In the case of my Strange Little Town theme, it will be in the img sub-directory. Unless you are using the latest version of Wordpress with the ability to add themes from inside the Wordpress administration, you had to upload your theme with an FTP program into the wp-content/themes directory, so this should be difficult.

Step 3 — Modify Your Stylesheet

The last thing you need to do is change your stylesheet. You have to modify the background attribute of your body tag. You have to give the URL for the location of the image to be used as a background. By default, the image will be repeated across and down the screen to fill it. You can control this placement. For example, the theme Strange Little Town has very distinctive illustration image as the background which is repeated across the top of the page. Here is the body tag:

body{
background:#c35d8a url('img/header.png') repeat-x;
text-align:center;
margin:0;
padding:0;
font-size:62.5%;
font-family:GillSans, Calibri, Trebuchet, sans-serif;
color:#2e1737;
}

By uploading the your graphic image in the theme directory, you make it easier to give the correct URL to the file. Most of the problems people have using background graphics come from either using the wrong path to the file or not wrestling with positioning. You can position background images very precisely or simply. For example, here’s an image positioned only once and at the left top corner of the screen:

body
{
margin: 10px 200px 10px 200px;
text-align: center;
color: #000;
font-family: "Lucida Grande",Tahoma,"Lucida Sans Unicode",Verdana,sans-serif;
background-color: #fff;
background-image: url(img/aerobic-woman.jpg);
background-repeat: no-repeat;
background-position: left top;
}

All of the background information could also have been given in a single line like this:

background: #00ff00 url('img/aerobic-woman.jpg') no-repeat left top;

For more information about bakcground CSS coding, check out W3Schools.

And I hope this helps!