Hintergrundbildwechsel in mobile.css

Question

Ok, ich leite derzeit meine Stylesheets wie unten aufgeführt:

Auf der Site.css habe ich eine bestimmte ID mit einem Hintergrundbild:

#container { 
    width: 1000px;
    margin-left: auto;
    margin-right: auto; 
    background: url('../images/topbackground.gif') no-repeat;
}

Auf der mobile.css dachte ich, ich könnte es einfach auf "none" oder ein anderes Bild ändern, ungefähr so (ich habe zu diesem Zeitpunkt mehrere Variationen ausprobiert):

#container {
    width: 100%;
    margin-left: 0;
    margin-right: 0; 
    background: #ffffff none;
    z-index: 30;
}

Es scheint jedoch nicht zu funktionieren. Das Hintergrundbild wird immer noch in der mobilen Version der Website angezeigt. Ich habe es sowohl in Opera Mini als auch im Android SDK-Emulator betrachtet. Die mobile Version der Website übernimmt alle anderen Eigenschaften von mobile.css, nur nicht Änderungen am Hintergrundbild.

Ich weiß, dass es zu diesem Zeitpunkt etwas Offensichtliches sein muss, dem ich einfach gegenüber unaufmerksam bin. Jede Hilfe wäre willkommen.

Answer 1

Dies liegt daran, dass Sie mobile.css laden, bevor Sie Site.css laden. (im Beispiel, das Sie erstellt haben). Ich denke, es funktioniert, wenn Sie zuerst die Site und dann mobile.css einfügen.

Wenn Sie aus irgendeinem Grund so beibehalten müssen, müssen Sie !important nach dem Statement verwenden.

Hier finden Sie ein funktionierendes Beispiel: http://jsfiddle.net/2EaQb/