Different header images for different pages

I have one page background image for my home page and one for all other pages. Following these instructions, http://forum.bytesforall.com/showthr...der+image+post
I put the bg image for *all other pages* into ATO ->Style and configure layout ->Layout container style as follows:
padding: 0;
background: url(/wp-content/themes/atahualpa/images/pagetopcontent.jpg) no-repeat center top;
(Header area height is set to 505, which is the size of the image. )
Then I added overrides to HTML/CSS as follows:
body.page-id-24 div#container {
padding: 0;
background-image: url(/wp-content/themes/atahualpa/images/pagetophome.jpg) no-repeat center top !important;
}
The image that shows up on the home page is the one set in config layout style>layout container, not the override one. (The home page has a header widget to hold an image gallery) The other pages just get cut off before the entire 505 pixel bg image is displayed.
What did I do wrong?
The attachment is the image that should display for the home page. The content page has the same radial background, but doesn't have the bottom "Imagine Formulate Appreciate" band at the bottom. The radial just continues for 505 pixels.