Aah, I see!
Yes, you're right, you can only have one background image in one element, but don't worry, we'll get this straight and working. :)
You know what? As I read the term "page color" in your post I got the idea that you actually could specify your page color through CSS too. With the current HTML code (which is too inflexible and makes maintenance a PITA - as we can see now that we're talking ;) ) this wouldn't change too much, though, 'cause you still need a background image for the blue border on the left but it leaves us one more option. :)
... Wow, I had a hard time to figure out how we can solve this without recoding the entire page but in the end I got it. We don't even need a left border background image. :)
You have to follow my instructions carefully now. If you work with me we'll have this done by midnight... nah, just kiddin'. :P OK, now seriously:
At first add a <div></div> with ID to surround (hence contain) all the content. So the opening tag goes directly after the opening <body> tag like so:
<body ...>
<div id="container">
<table ...>
And the closing tag of the div goes right before the closing body tag:
</div>
</body>
Then remove the background attribute from the body tag and the width attributes from the first two tables (ah and as we're already removing... remove the height attributes too, they aren't working properly anyway):
<table width="100%" height="59" border="0" cellpadding="0" cellspacing="0" background="design/topbg.gif">
...
<table width="100%" height="36" border="0" cellpadding="0" cellspacing="0">
And now to the same table tags we removed the width and height from add a class attribute with value... let's say "header" since this is the case:
<table class="header" border="0" cellpadding="0" cellspacing="0" background="design/topbg.gif">
...
<table class="header" border="0" cellpadding="0" cellspacing="0">
Ok, you still with me? :) The basic and most challenging changes are done, now to the fun part. We do all the styling of the left border with CSS. No background image needed.
Remember those <style></style> tags with the long line of code in it I told you? Add this before the line you already have:
body {
padding-left: 56px;
background-color: #52739C;
}
And change the long line of CSS from this:
body {background: url(pictures/3HorsesBySusanKerr.jpg) bottom right fixed no-repeat;}
to this:
#container {
background: #E7EFFF url(pictures/3HorsesBySusanKerr.jpg) bottom right fixed no-repeat;
height: 100%;
border-left: 1px solid #214A6B;
}
And after these lines you simply add
.header {
position: relative;
margin-left: -57px;
}
And preview the result in a browser of your choice. :)
TADAA! We're all done... and even before midnight. :D