I figured out how to have customized backgrounds with BackPack using a User Style Sheet. I found an easy way to do this using FireFox’s add-on called “Stylish” available here

I thought that others might like to do this so I am posting my methodology.

1. Install the stylish add-on for Firefox and restart the browser.

2. Locate an alternate background, save it to your computer, and upload it to your image host on the web. I found a bunch of really nice wallpapers at Squidfingers. You will need to know the url of the image so you can link to it in the new user style sheet (easy to do with Flickr, Photobucket, your own space, etc.)

3. Navigate to your BackPack URL. Click on the pen/paper icon in the bottom right corner of the FireFox browser window and select “write style”/”for this url” from the menu that pops up. Download this image of my browser with a new style applied along with menu images before you prceed: [img]http://myskitch.com/igeekrn/manage_styles-20071110-160704.jpg[/img]

4. Copy the following code replacing the asterisks with your information per the sample image. Save when done and close and relaunch your browser. You should see the new background on all of your BP pages. You will have to also do this for Writeboards if you want a cohesive look, which is simple, involving navigating to that url and simply copying/pasting the same CSS code in.

@namespace url(<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>);
@-moz-document domain(*******.backpackit.com) {

@-moz-document url("https://********.backpackit.com/") {

}

html, body { background: #7d8a2b url(<a href="http://www">http://www</a>.********.com/css_images/55original.gif) !important;

background-repeat: repeat-y }

.admin a:link, .admin a:visited, a.admin:link, a.admin:visited {
    font-family: verdana, sans-serif;
    font-size: 10px;
    font-weight: normal;
    text-transform: none;
    color: #fff !important;

}
small {color: #fff !important}
div#Footer {
    clear: left;
    color: #fff !important;
    padding: 3px 0 30px 30px;
    margin: 0 auto;
    }
div#Footer a:link, div#Footer a:visited { color: #fff !important; }
}

I hope this helps all of you get more out of your Backpack account.

Thanks, it worked great! Your instructions were clear and easy.