Zwei Hintergrundbilder in einem <div>

[Fabian St.]

Hi!

Ich stehe gerade vor dem Problem, dass ich für ein <div> zwei Hintergrundbilder angeben muss (eines links, das zweite rechts), es jedoch nicht gebacken kriege. Das ganze soll so ausschauen:

+--------------------<div id="container">----------------+
|                                                        |
| Hintergrundbild1                      Hintergrundbild2 |
|                                                        |
+--------------------------------------------------------+

In meinem css-File habe ich bisher folgendes drin:

#container {
            background:url(../img/test.png) top left no-repeat;
            background:url(../img/bg-top-large-section.jpg) top right repeat-x;
           }

Das Problem dabei ist natürlich, dass die erste Notation durch die zweite überschrieben wird und dass ich ich das ganze über reines CSS lösen muss, da es sich hierbei um ein ergänzendes Stylesheet (type="alternate stylesheet") handelt, welches vom User mittels JavaScript bei Bedarf gewählt werden kann, sodass ich keine Eingriffe in den HTML-Code machen kann.

Jemand eine Idee?

Grüße,
Fabian St.