I see. It looks like the most useful classes are on the #container itself, which I didn't really understand. Conventionally, these are put on the <body> tag for the sake of descendant selectors. However, Drupal 7 (or perhaps just this theme) likes to do things differently.
#container { ... }
#container.front { ... } /* Will NOT work in IE. */
What about just using the class? I assume if you're *not* on the front page, the class is .not-front? So one option is this:
.front { ... } /* for front page */
.not-front { ... } /* for everything else, if it exists */
However there's a (small) chance some other element would have a style for .front, or that 'not-front' never exists. Try this one, see if it works for you.
So, this doesn't work:
#container { ... }
.front { ... } /* for front page */
because IDs are more specific than classes and #container will always override .front.
This is the general utility of using <body> for this sort of thing, because descendant selectors are supported in all browsers. *Ideally,* we would want
<body class="front">
...
<div id="container">
...
</div>
...
</body>
then *ideally* you could use
#container { ... }
.front #container { ... } /* what we normally do using the body tag */
This is leveraging ancestry and is what we're used to in Drupal 6. I like this.
So, in the same convention as the previous example, what you might consider is creating a separate "inner" element for the sake of selecting descendants. Not completely semantic, and means more markup, but we *have* to deal with IE.
<body>
...
<div id="container" class="html front logged-in no-sidebars page-node toolbar toolbar-drawer">
<div id="container-inner">
...
</div>
</div>
...
</body>
Then you can apply your background-image property to the inner element.
#container-inner { ... }
.front #container-inner { ... } /* for front page */
I hope this helps. Cheers and good luck.
Carl